fix(slackbot): resolve channel references and filter search by channel tags (#9256)

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Jamison Lahman <jamison@lahman.dev>

backend/alembic/versions/27fb147a843f_add_timestamps_to_user_table.py

@@ -1,7 +1,7 @@
 """add timestamps to user table
 
 Revision ID: 27fb147a843f
-Revises: a3b8d9e2f1c4
+Revises: b5c4d7e8f9a1
 Create Date: 2026-03-08 17:18:40.828644
 
 """
@@ -12,7 +12,7 @@ import sqlalchemy as sa
 
 # revision identifiers, used by Alembic.
 revision = "27fb147a843f"
-down_revision = "a3b8d9e2f1c4"
+down_revision = "b5c4d7e8f9a1"
 branch_labels = None
 depends_on = None
 

backend/onyx/db/users.py

@@ -185,7 +185,7 @@ def get_all_accepted_users(
     where_clause = _get_accepted_user_where_clause(
         include_external=include_external,
     )
-    stmt = stmt.where(*where_clause)
+    stmt = stmt.where(*where_clause).order_by(User.email)
     return db_session.scalars(stmt).unique().all()
 
 

backend/onyx/indexing/adapters/document_indexing_adapter.py

@@ -123,15 +123,11 @@ class DocumentIndexingBatchAdapter:
         }
 
         doc_id_to_new_chunk_cnt: dict[str, int] = {
-            document_id: len(
-                [
-                    chunk
-                    for chunk in chunks_with_embeddings
-                    if chunk.source_document.id == document_id
-                ]
-            )
-            for document_id in updatable_ids
+            doc_id: 0 for doc_id in updatable_ids
         }
+        for chunk in chunks_with_embeddings:
+            if chunk.source_document.id in doc_id_to_new_chunk_cnt:
+                doc_id_to_new_chunk_cnt[chunk.source_document.id] += 1
 
         # Get ancestor hierarchy node IDs for each document
         doc_id_to_ancestor_ids = self._get_ancestor_ids_for_documents(

backend/onyx/indexing/embedder.py

@@ -16,6 +16,7 @@ from onyx.indexing.models import DocAwareChunk
 from onyx.indexing.models import IndexChunk
 from onyx.natural_language_processing.search_nlp_models import EmbeddingModel
 from onyx.utils.logger import setup_logger
+from onyx.utils.pydantic_util import shallow_model_dump
 from onyx.utils.timing import log_function_time
 from shared_configs.configs import INDEXING_MODEL_SERVER_HOST
 from shared_configs.configs import INDEXING_MODEL_SERVER_PORT
@@ -210,8 +211,8 @@ class DefaultIndexingEmbedder(IndexingEmbedder):
                     )[0]
                     title_embed_dict[title] = title_embedding
 
-            new_embedded_chunk = IndexChunk(
-                **chunk.model_dump(),
+            new_embedded_chunk = IndexChunk.model_construct(
+                **shallow_model_dump(chunk),
                 embeddings=ChunkEmbedding(
                     full_embedding=chunk_embeddings[0],
                     mini_chunk_embeddings=chunk_embeddings[1:],

backend/onyx/indexing/models.py

@@ -12,6 +12,7 @@ from onyx.connectors.models import Document
 from onyx.db.enums import EmbeddingPrecision
 from onyx.db.enums import SwitchoverType
 from onyx.utils.logger import setup_logger
+from onyx.utils.pydantic_util import shallow_model_dump
 from shared_configs.enums import EmbeddingProvider
 from shared_configs.model_server_models import Embedding
 
@@ -133,9 +134,8 @@ class DocMetadataAwareIndexChunk(IndexChunk):
         tenant_id: str,
         ancestor_hierarchy_node_ids: list[int] | None = None,
     ) -> "DocMetadataAwareIndexChunk":
-        index_chunk_data = index_chunk.model_dump()
-        return cls(
-            **index_chunk_data,
+        return cls.model_construct(
+            **shallow_model_dump(index_chunk),
             access=access,
             document_sets=document_sets,
             user_project=user_project,

backend/onyx/llm/model_metadata_enrichments.json

@@ -3782,16 +3782,6 @@
     "display_name": "Claude Sonnet 3.5",
     "model_vendor": "anthropic"
   },
-  "vertex_ai/claude-3-5-sonnet-v2": {
-    "display_name": "Claude Sonnet 3.5",
-    "model_vendor": "anthropic",
-    "model_version": "v2"
-  },
-  "vertex_ai/claude-3-5-sonnet-v2@20241022": {
-    "display_name": "Claude Sonnet 3.5 v2",
-    "model_vendor": "anthropic",
-    "model_version": "20241022"
-  },
   "vertex_ai/claude-3-5-sonnet@20240620": {
     "display_name": "Claude Sonnet 3.5",
     "model_vendor": "anthropic",

backend/onyx/onyxbot/slack/constants.py

@@ -1,5 +1,9 @@
+import re
 from enum import Enum
 
+# Matches Slack channel references like <#C097NBWMY8Y> or <#C097NBWMY8Y|channel-name>
+SLACK_CHANNEL_REF_PATTERN = re.compile(r"<#([A-Z0-9]+)(?:\|([^>]+))?>")
+
 LIKE_BLOCK_ACTION_ID = "feedback-like"
 DISLIKE_BLOCK_ACTION_ID = "feedback-dislike"
 SHOW_EVERYONE_ACTION_ID = "show-everyone"

backend/onyx/onyxbot/slack/handlers/handle_regular_answer.py

@@ -18,15 +18,18 @@ from onyx.configs.onyxbot_configs import ONYX_BOT_DISPLAY_ERROR_MSGS
 from onyx.configs.onyxbot_configs import ONYX_BOT_NUM_RETRIES
 from onyx.configs.onyxbot_configs import ONYX_BOT_REACT_EMOJI
 from onyx.context.search.models import BaseFilters
+from onyx.context.search.models import Tag
 from onyx.db.engine.sql_engine import get_session_with_current_tenant
 from onyx.db.models import SlackChannelConfig
 from onyx.db.models import User
 from onyx.db.persona import get_persona_by_id
 from onyx.db.users import get_user_by_email
 from onyx.onyxbot.slack.blocks import build_slack_response_blocks
+from onyx.onyxbot.slack.constants import SLACK_CHANNEL_REF_PATTERN
 from onyx.onyxbot.slack.handlers.utils import send_team_member_message
 from onyx.onyxbot.slack.models import SlackMessageInfo
 from onyx.onyxbot.slack.models import ThreadMessage
+from onyx.onyxbot.slack.utils import get_channel_from_id
 from onyx.onyxbot.slack.utils import get_channel_name_from_id
 from onyx.onyxbot.slack.utils import respond_in_thread_or_channel
 from onyx.onyxbot.slack.utils import SlackRateLimiter
@@ -41,6 +44,51 @@ srl = SlackRateLimiter()
 RT = TypeVar("RT")  # return type
 
 
+def resolve_channel_references(
+    message: str,
+    client: WebClient,
+    logger: OnyxLoggingAdapter,
+) -> tuple[str, list[Tag]]:
+    """Parse Slack channel references from a message, resolve IDs to names,
+    replace the raw markup with readable #channel-name, and return channel tags
+    for search filtering."""
+    tags: list[Tag] = []
+    channel_matches = SLACK_CHANNEL_REF_PATTERN.findall(message)
+    seen_channel_ids: set[str] = set()
+
+    for channel_id, channel_name_from_markup in channel_matches:
+        if channel_id in seen_channel_ids:
+            continue
+        seen_channel_ids.add(channel_id)
+
+        channel_name = channel_name_from_markup or None
+
+        if not channel_name:
+            try:
+                channel_info = get_channel_from_id(client=client, channel_id=channel_id)
+                channel_name = channel_info.get("name") or None
+            except Exception:
+                logger.warning(f"Failed to resolve channel name for ID: {channel_id}")
+
+            if not channel_name:
+                continue
+
+        # Replace raw Slack markup with readable channel name
+        if channel_name_from_markup:
+            message = message.replace(
+                f"<#{channel_id}|{channel_name_from_markup}>",
+                f"#{channel_name}",
+            )
+        else:
+            message = message.replace(
+                f"<#{channel_id}>",
+                f"#{channel_name}",
+            )
+        tags.append(Tag(tag_key="Channel", tag_value=channel_name))
+
+    return message, tags
+
+
 def rate_limits(
     client: WebClient, channel: str, thread_ts: Optional[str]
 ) -> Callable[[Callable[..., RT]], Callable[..., RT]]:
@@ -157,6 +205,20 @@ def handle_regular_answer(
     user_message = messages[-1]
     history_messages = messages[:-1]
 
+    # Resolve any <#CHANNEL_ID> references in the user message to readable
+    # channel names and extract channel tags for search filtering
+    resolved_message, channel_tags = resolve_channel_references(
+        message=user_message.message,
+        client=client,
+        logger=logger,
+    )
+
+    user_message = ThreadMessage(
+        message=resolved_message,
+        sender=user_message.sender,
+        role=user_message.role,
+    )
+
     channel_name, _ = get_channel_name_from_id(
         client=client,
         channel_id=channel,
@@ -207,6 +269,7 @@ def handle_regular_answer(
             source_type=None,
             document_set=document_set_names,
             time_cutoff=None,
+            tags=channel_tags if channel_tags else None,
         )
 
         new_message_request = SendMessageRequest(
@@ -231,6 +294,16 @@ def handle_regular_answer(
             slack_context_str=slack_context_str,
         )
 
+        # If a channel filter was applied but no results were found, override
+        # the LLM response to avoid hallucinated answers about unindexed channels
+        if channel_tags and not answer.citation_info and not answer.top_documents:
+            channel_names = ", ".join(f"#{tag.tag_value}" for tag in channel_tags)
+            answer.answer = (
+                f"No indexed data found for {channel_names}. "
+                "This channel may not be indexed, or there may be no messages "
+                "matching your query within it."
+            )
+
     except Exception as e:
         logger.exception(
             f"Unable to process message - did not successfully answer "
@@ -285,6 +358,7 @@ def handle_regular_answer(
         only_respond_if_citations
         and not answer.citation_info
         and not message_info.bypass_filters
+        and not channel_tags
     ):
         logger.error(
             f"Unable to find citations to answer: '{answer.answer}' - not answering!"

backend/onyx/server/features/build/api/sessions_api.py

@@ -732,7 +732,7 @@ def get_webapp_info(
     return WebappInfo(**webapp_info)
 
 
-@router.get("/{session_id}/webapp/download")
+@router.get("/{session_id}/webapp-download")
 def download_webapp(
     session_id: UUID,
     user: User = Depends(current_user),

backend/onyx/utils/pydantic_util.py

@@ -0,0 +1,13 @@
+from typing import Any
+
+from pydantic import BaseModel
+
+
+def shallow_model_dump(model_instance: BaseModel) -> dict[str, Any]:
+    """Like model_dump(), but returns references to field values instead of
+    deep copies. Use with model_construct() to avoid unnecessary memory
+    duplication when building subclass instances."""
+    return {
+        field_name: getattr(model_instance, field_name)
+        for field_name in model_instance.__class__.model_fields
+    }

backend/requirements/default.txt

@@ -750,7 +750,7 @@ pypandoc-binary==1.16.2
     # via onyx
 pyparsing==3.2.5
     # via httplib2
-pypdf==6.7.5
+pypdf==6.8.0
     # via
     #   onyx
     #   unstructured-client
@@ -1020,7 +1020,7 @@ toolz==1.1.0
     #   dask
     #   distributed
     #   partd
-tornado==6.5.2
+tornado==6.5.5
     # via distributed
 tqdm==4.67.1
     # via

backend/requirements/dev.txt

@@ -466,7 +466,7 @@ tokenizers==0.21.4
     # via
     #   cohere
     #   litellm
-tornado==6.5.2
+tornado==6.5.5
     # via
     #   ipykernel
     #   jupyter-client

backend/tests/unit/onyx/llm/test_true_openai_model.py

@@ -26,14 +26,6 @@ class TestIsTrueOpenAIModel:
         """Test that real OpenAI GPT-4o-mini model is correctly identified."""
         assert is_true_openai_model(LlmProviderNames.OPENAI, "gpt-4o-mini") is True
 
-    def test_real_openai_o1_preview(self) -> None:
-        """Test that real OpenAI o1-preview reasoning model is correctly identified."""
-        assert is_true_openai_model(LlmProviderNames.OPENAI, "o1-preview") is True
-
-    def test_real_openai_o1_mini(self) -> None:
-        """Test that real OpenAI o1-mini reasoning model is correctly identified."""
-        assert is_true_openai_model(LlmProviderNames.OPENAI, "o1-mini") is True
-
     def test_openai_with_provider_prefix(self) -> None:
         """Test that OpenAI model with provider prefix is correctly identified."""
         assert is_true_openai_model(LlmProviderNames.OPENAI, "openai/gpt-4") is False

backend/tests/unit/onyx/onyxbot/test_handle_regular_answer.py

@@ -0,0 +1,204 @@
+"""Tests for Slack channel reference resolution and tag filtering
+in handle_regular_answer.py."""
+
+from unittest.mock import MagicMock
+
+from slack_sdk.errors import SlackApiError
+
+from onyx.context.search.models import Tag
+from onyx.onyxbot.slack.constants import SLACK_CHANNEL_REF_PATTERN
+from onyx.onyxbot.slack.handlers.handle_regular_answer import resolve_channel_references
+
+
+# ---------------------------------------------------------------------------
+# Helpers
+# ---------------------------------------------------------------------------
+
+
+def _mock_client_with_channels(
+    channel_map: dict[str, str],
+) -> MagicMock:
+    """Return a mock WebClient where conversations_info resolves IDs to names."""
+    client = MagicMock()
+
+    def _conversations_info(channel: str) -> MagicMock:
+        if channel in channel_map:
+            resp = MagicMock()
+            resp.validate = MagicMock()
+            resp.__getitem__ = lambda _self, key: {
+                "channel": {
+                    "name": channel_map[channel],
+                    "is_im": False,
+                    "is_mpim": False,
+                }
+            }[key]
+            return resp
+        raise SlackApiError("channel_not_found", response=MagicMock())
+
+    client.conversations_info = _conversations_info
+    return client
+
+
+def _mock_logger() -> MagicMock:
+    return MagicMock()
+
+
+# ---------------------------------------------------------------------------
+# SLACK_CHANNEL_REF_PATTERN regex tests
+# ---------------------------------------------------------------------------
+
+
+class TestSlackChannelRefPattern:
+    def test_matches_bare_channel_id(self) -> None:
+        matches = SLACK_CHANNEL_REF_PATTERN.findall("<#C097NBWMY8Y>")
+        assert matches == [("C097NBWMY8Y", "")]
+
+    def test_matches_channel_id_with_name(self) -> None:
+        matches = SLACK_CHANNEL_REF_PATTERN.findall("<#C097NBWMY8Y|eng-infra>")
+        assert matches == [("C097NBWMY8Y", "eng-infra")]
+
+    def test_matches_multiple_channels(self) -> None:
+        msg = "compare <#C111AAA> and <#C222BBB|general>"
+        matches = SLACK_CHANNEL_REF_PATTERN.findall(msg)
+        assert len(matches) == 2
+        assert ("C111AAA", "") in matches
+        assert ("C222BBB", "general") in matches
+
+    def test_no_match_on_plain_text(self) -> None:
+        matches = SLACK_CHANNEL_REF_PATTERN.findall("no channels here")
+        assert matches == []
+
+    def test_no_match_on_user_mention(self) -> None:
+        matches = SLACK_CHANNEL_REF_PATTERN.findall("<@U12345>")
+        assert matches == []
+
+
+# ---------------------------------------------------------------------------
+# resolve_channel_references tests
+# ---------------------------------------------------------------------------
+
+
+class TestResolveChannelReferences:
+    def test_resolves_bare_channel_id_via_api(self) -> None:
+        client = _mock_client_with_channels({"C097NBWMY8Y": "eng-infra"})
+        logger = _mock_logger()
+
+        message, tags = resolve_channel_references(
+            message="summary of <#C097NBWMY8Y> this week",
+            client=client,
+            logger=logger,
+        )
+
+        assert message == "summary of #eng-infra this week"
+        assert len(tags) == 1
+        assert tags[0] == Tag(tag_key="Channel", tag_value="eng-infra")
+
+    def test_uses_name_from_pipe_format_without_api_call(self) -> None:
+        client = MagicMock()
+        logger = _mock_logger()
+
+        message, tags = resolve_channel_references(
+            message="check <#C097NBWMY8Y|eng-infra> for updates",
+            client=client,
+            logger=logger,
+        )
+
+        assert message == "check #eng-infra for updates"
+        assert tags == [Tag(tag_key="Channel", tag_value="eng-infra")]
+        # Should NOT have called the API since name was in the markup
+        client.conversations_info.assert_not_called()
+
+    def test_multiple_channels(self) -> None:
+        client = _mock_client_with_channels(
+            {
+                "C111AAA": "eng-infra",
+                "C222BBB": "eng-general",
+            }
+        )
+        logger = _mock_logger()
+
+        message, tags = resolve_channel_references(
+            message="compare <#C111AAA> and <#C222BBB>",
+            client=client,
+            logger=logger,
+        )
+
+        assert "#eng-infra" in message
+        assert "#eng-general" in message
+        assert "<#" not in message
+        assert len(tags) == 2
+        tag_values = {t.tag_value for t in tags}
+        assert tag_values == {"eng-infra", "eng-general"}
+
+    def test_no_channel_references_returns_unchanged(self) -> None:
+        client = MagicMock()
+        logger = _mock_logger()
+
+        message, tags = resolve_channel_references(
+            message="just a normal message with no channels",
+            client=client,
+            logger=logger,
+        )
+
+        assert message == "just a normal message with no channels"
+        assert tags == []
+
+    def test_api_failure_skips_channel_gracefully(self) -> None:
+        # Client that fails for all channel lookups
+        client = _mock_client_with_channels({})
+        logger = _mock_logger()
+
+        message, tags = resolve_channel_references(
+            message="check <#CBADID123>",
+            client=client,
+            logger=logger,
+        )
+
+        # Message should remain unchanged for the failed channel
+        assert "<#CBADID123>" in message
+        assert tags == []
+        logger.warning.assert_called_once()
+
+    def test_partial_failure_resolves_what_it_can(self) -> None:
+        # Only one of two channels resolves
+        client = _mock_client_with_channels({"C111AAA": "eng-infra"})
+        logger = _mock_logger()
+
+        message, tags = resolve_channel_references(
+            message="compare <#C111AAA> and <#CBADID123>",
+            client=client,
+            logger=logger,
+        )
+
+        assert "#eng-infra" in message
+        assert "<#CBADID123>" in message  # failed one stays raw
+        assert len(tags) == 1
+        assert tags[0].tag_value == "eng-infra"
+
+    def test_duplicate_channel_produces_single_tag(self) -> None:
+        client = _mock_client_with_channels({"C111AAA": "eng-infra"})
+        logger = _mock_logger()
+
+        message, tags = resolve_channel_references(
+            message="summarize <#C111AAA> and compare with <#C111AAA>",
+            client=client,
+            logger=logger,
+        )
+
+        assert message == "summarize #eng-infra and compare with #eng-infra"
+        assert len(tags) == 1
+        assert tags[0].tag_value == "eng-infra"
+
+    def test_mixed_pipe_and_bare_formats(self) -> None:
+        client = _mock_client_with_channels({"C222BBB": "random"})
+        logger = _mock_logger()
+
+        message, tags = resolve_channel_references(
+            message="see <#C111AAA|eng-infra> and <#C222BBB>",
+            client=client,
+            logger=logger,
+        )
+
+        assert "#eng-infra" in message
+        assert "#random" in message
+        assert len(tags) == 2

deployment/docker_compose/docker-compose.dev.yml

@@ -38,6 +38,11 @@ services:
   opensearch:
     ports:
       - "9200:9200"
+    # Rootless Docker can reject the base OpenSearch ulimit settings, so clear
+    # the inherited block entirely in the dev override.
+    ulimits: !reset null
+    environment:
+      - bootstrap.memory_lock=false
 
   inference_model_server:
     ports:

pyproject.toml

@@ -91,7 +91,7 @@ backend = [
     "python-gitlab==5.6.0",
     "python-pptx==0.6.23",
     "pypandoc_binary==1.16.2",
-    "pypdf==6.7.5",
+    "pypdf==6.8.0",
     "pytest-mock==3.12.0",
     "pytest-playwright==0.7.0",
     "python-docx==1.1.2",

tools/ods/cmd/print_latest.go

@@ -0,0 +1,36 @@
+package cmd
+
+import (
+	"fmt"
+
+	"github.com/jmelahman/tag/git"
+	"github.com/spf13/cobra"
+)
+
+// NewLatestStableTagCommand creates the latest-stable-tag command.
+func NewLatestStableTagCommand() *cobra.Command {
+	cmd := &cobra.Command{
+		Use:   "latest-stable-tag",
+		Short: "Print the git tag that should receive the 'latest' Docker tag",
+		Long: `Print the highest stable (non-pre-release) semver tag in the repository.
+
+This is used during deployment to decide whether a given tag should
+receive the "latest" tag on Docker Hub. Only the highest vX.Y.Z tag
+qualifies. Tags with pre-release suffixes (e.g. v1.2.3-beta,
+v1.2.3-cloud.1) are excluded.`,
+		Args: cobra.NoArgs,
+		RunE: func(c *cobra.Command, _ []string) error {
+			tag, err := git.GetLatestStableSemverTag("")
+			if err != nil {
+				return fmt.Errorf("get latest stable semver tag: %w", err)
+			}
+			if tag == "" {
+				return fmt.Errorf("no stable semver tag found in repository")
+			}
+			fmt.Println(tag)
+			return nil
+		},
+	}
+
+	return cmd
+}

tools/ods/cmd/root.go

@@ -52,6 +52,7 @@ func NewRootCommand() *cobra.Command {
 	cmd.AddCommand(NewScreenshotDiffCommand())
 	cmd.AddCommand(NewDesktopCommand())
 	cmd.AddCommand(NewWebCommand())
+	cmd.AddCommand(NewLatestStableTagCommand())
 	cmd.AddCommand(NewWhoisCommand())
 
 	return cmd

tools/ods/go.mod

@@ -3,12 +3,13 @@ module github.com/onyx-dot-app/onyx/tools/ods
 go 1.26.0
 
 require (
+	github.com/jmelahman/tag v0.5.2
 	github.com/sirupsen/logrus v1.9.3
-	github.com/spf13/cobra v1.10.1
-	github.com/spf13/pflag v1.0.9
+	github.com/spf13/cobra v1.10.2
+	github.com/spf13/pflag v1.0.10
 )
 
 require (
 	github.com/inconshreveable/mousetrap v1.1.0 // indirect
-	golang.org/x/sys v0.0.0-20220715151400-c0bba94af5f8 // indirect
+	golang.org/x/sys v0.39.0 // indirect
 )

tools/ods/go.sum

@@ -4,20 +4,26 @@ github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/inconshreveable/mousetrap v1.1.0 h1:wN+x4NVGpMsO7ErUn/mUI3vEoE6Jt13X2s0bqwp9tc8=
 github.com/inconshreveable/mousetrap v1.1.0/go.mod h1:vpF70FUmC8bwa3OWnCshd2FqLfsEA9PFc4w1p2J65bw=
+github.com/jmelahman/tag v0.5.2 h1:g6A/aHehu5tkA31mPoDsXBNr1FigZ9A82Y8WVgb/WsM=
+github.com/jmelahman/tag v0.5.2/go.mod h1:qmuqk19B1BKkpcg3kn7l/Eey+UqucLxgOWkteUGiG4Q=
 github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
 github.com/russross/blackfriday/v2 v2.1.0/go.mod h1:+Rmxgy9KzJVeS9/2gXHxylqXiyQDYRxCVz55jmeOWTM=
 github.com/sirupsen/logrus v1.9.3 h1:dueUQJ1C2q9oE3F7wvmSGAaVtTmUizReu6fjN8uqzbQ=
 github.com/sirupsen/logrus v1.9.3/go.mod h1:naHLuLoDiP4jHNo9R0sCBMtWGeIprob74mVsIT4qYEQ=
-github.com/spf13/cobra v1.10.1 h1:lJeBwCfmrnXthfAupyUTzJ/J4Nc1RsHC/mSRU2dll/s=
-github.com/spf13/cobra v1.10.1/go.mod h1:7SmJGaTHFVBY0jW4NXGluQoLvhqFQM+6XSKD+P4XaB0=
-github.com/spf13/pflag v1.0.9 h1:9exaQaMOCwffKiiiYk6/BndUBv+iRViNW+4lEMi0PvY=
+github.com/spf13/cobra v1.10.2 h1:DMTTonx5m65Ic0GOoRY2c16WCbHxOOw6xxezuLaBpcU=
+github.com/spf13/cobra v1.10.2/go.mod h1:7C1pvHqHw5A4vrJfjNwvOdzYu0Gml16OCs2GRiTUUS4=
 github.com/spf13/pflag v1.0.9/go.mod h1:McXfInJRrz4CZXVZOBLb0bTZqETkiAhM9Iw0y3An2Bg=
+github.com/spf13/pflag v1.0.10 h1:4EBh2KAYBwaONj6b2Ye1GiHfwjqyROoF4RwYO+vPwFk=
+github.com/spf13/pflag v1.0.10/go.mod h1:McXfInJRrz4CZXVZOBLb0bTZqETkiAhM9Iw0y3An2Bg=
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
-github.com/stretchr/testify v1.7.0 h1:nwc3DEeHmmLAfoZucVR881uASk0Mfjw8xYJ99tb5CcY=
 github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
-golang.org/x/sys v0.0.0-20220715151400-c0bba94af5f8 h1:0A+M6Uqn+Eje4kHMK80dtF3JCXC4ykBgQG4Fe06QRhQ=
+github.com/stretchr/testify v1.11.1 h1:7s2iGBzp5EwR7/aIZr8ao5+dra3wiQyKjjFuvgVKu7U=
+github.com/stretchr/testify v1.11.1/go.mod h1:wZwfW3scLgRK+23gO65QZefKpKQRnfz6sD981Nm4B6U=
+go.yaml.in/yaml/v3 v3.0.4/go.mod h1:DhzuOOF2ATzADvBadXxruRBLzYTpT36CKvDb3+aBEFg=
 golang.org/x/sys v0.0.0-20220715151400-c0bba94af5f8/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.39.0 h1:CvCKL8MeisomCi6qNZ+wbb0DN9E5AATixKsvNtMoMFk=
+golang.org/x/sys v0.39.0/go.mod h1:OgkHotnGiDImocRcuBABYBEXf8A9a87e/uXjp9XT3ks=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=

uv.lock

@@ -4466,7 +4466,7 @@ requires-dist = [
     { name = "pygithub", marker = "extra == 'backend'", specifier = "==2.5.0" },
     { name = "pympler", marker = "extra == 'backend'", specifier = "==1.1" },
     { name = "pypandoc-binary", marker = "extra == 'backend'", specifier = "==1.16.2" },
-    { name = "pypdf", marker = "extra == 'backend'", specifier = "==6.7.5" },
+    { name = "pypdf", marker = "extra == 'backend'", specifier = "==6.8.0" },
     { name = "pytest", marker = "extra == 'dev'", specifier = "==8.3.5" },
     { name = "pytest-alembic", marker = "extra == 'dev'", specifier = "==0.12.1" },
     { name = "pytest-asyncio", marker = "extra == 'dev'", specifier = "==1.3.0" },
@@ -5713,11 +5713,11 @@ wheels = [
 
 [[package]]
 name = "pypdf"
-version = "6.7.5"
+version = "6.8.0"
 source = { registry = "https://pypi.org/simple" }
-sdist = { url = "https://files.pythonhosted.org/packages/f6/52/37cc0aa9e9d1bf7729a737a0d83f8b3f851c8eb137373d9f71eafb0a3405/pypdf-6.7.5.tar.gz", hash = "sha256:40bb2e2e872078655f12b9b89e2f900888bb505e88a82150b64f9f34fa25651d", size = 5304278, upload-time = "2026-03-02T09:05:21.464Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/b4/a3/e705b0805212b663a4c27b861c8a603dba0f8b4bb281f96f8e746576a50d/pypdf-6.8.0.tar.gz", hash = "sha256:cb7eaeaa4133ce76f762184069a854e03f4d9a08568f0e0623f7ea810407833b", size = 5307831, upload-time = "2026-03-09T13:37:40.591Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/05/89/336673efd0a88956562658aba4f0bbef7cb92a6fbcbcaf94926dbc82b408/pypdf-6.7.5-py3-none-any.whl", hash = "sha256:07ba7f1d6e6d9aa2a17f5452e320a84718d4ce863367f7ede2fd72280349ab13", size = 331421, upload-time = "2026-03-02T09:05:19.722Z" },
+    { url = "https://files.pythonhosted.org/packages/8c/ec/4ccf3bb86b1afe5d7176e1c8abcdbf22b53dd682ec2eda50e1caadcf6846/pypdf-6.8.0-py3-none-any.whl", hash = "sha256:2a025080a8dd73f48123c89c57174a5ff3806c71763ee4e49572dc90454943c7", size = 332177, upload-time = "2026-03-09T13:37:38.774Z" },
 ]
 
 [[package]]
@@ -7233,21 +7233,19 @@ wheels = [
 
 [[package]]
 name = "tornado"
-version = "6.5.2"
+version = "6.5.5"
 source = { registry = "https://pypi.org/simple" }
-sdist = { url = "https://files.pythonhosted.org/packages/09/ce/1eb500eae19f4648281bb2186927bb062d2438c2e5093d1360391afd2f90/tornado-6.5.2.tar.gz", hash = "sha256:ab53c8f9a0fa351e2c0741284e06c7a45da86afb544133201c5cc8578eb076a0", size = 510821, upload-time = "2025-08-08T18:27:00.78Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/f8/f1/3173dfa4a18db4a9b03e5d55325559dab51ee653763bb8745a75af491286/tornado-6.5.5.tar.gz", hash = "sha256:192b8f3ea91bd7f1f50c06955416ed76c6b72f96779b962f07f911b91e8d30e9", size = 516006, upload-time = "2026-03-10T21:31:02.067Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/f6/48/6a7529df2c9cc12efd2e8f5dd219516184d703b34c06786809670df5b3bd/tornado-6.5.2-cp39-abi3-macosx_10_9_universal2.whl", hash = "sha256:2436822940d37cde62771cff8774f4f00b3c8024fe482e16ca8387b8a2724db6", size = 442563, upload-time = "2025-08-08T18:26:42.945Z" },
-    { url = "https://files.pythonhosted.org/packages/f2/b5/9b575a0ed3e50b00c40b08cbce82eb618229091d09f6d14bce80fc01cb0b/tornado-6.5.2-cp39-abi3-macosx_10_9_x86_64.whl", hash = "sha256:583a52c7aa94ee046854ba81d9ebb6c81ec0fd30386d96f7640c96dad45a03ef", size = 440729, upload-time = "2025-08-08T18:26:44.473Z" },
-    { url = "https://files.pythonhosted.org/packages/1b/4e/619174f52b120efcf23633c817fd3fed867c30bff785e2cd5a53a70e483c/tornado-6.5.2-cp39-abi3-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:b0fe179f28d597deab2842b86ed4060deec7388f1fd9c1b4a41adf8af058907e", size = 444295, upload-time = "2025-08-08T18:26:46.021Z" },
-    { url = "https://files.pythonhosted.org/packages/95/fa/87b41709552bbd393c85dd18e4e3499dcd8983f66e7972926db8d96aa065/tornado-6.5.2-cp39-abi3-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:b186e85d1e3536d69583d2298423744740986018e393d0321df7340e71898882", size = 443644, upload-time = "2025-08-08T18:26:47.625Z" },
-    { url = "https://files.pythonhosted.org/packages/f9/41/fb15f06e33d7430ca89420283a8762a4e6b8025b800ea51796ab5e6d9559/tornado-6.5.2-cp39-abi3-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:e792706668c87709709c18b353da1f7662317b563ff69f00bab83595940c7108", size = 443878, upload-time = "2025-08-08T18:26:50.599Z" },
-    { url = "https://files.pythonhosted.org/packages/11/92/fe6d57da897776ad2e01e279170ea8ae726755b045fe5ac73b75357a5a3f/tornado-6.5.2-cp39-abi3-musllinux_1_2_aarch64.whl", hash = "sha256:06ceb1300fd70cb20e43b1ad8aaee0266e69e7ced38fa910ad2e03285009ce7c", size = 444549, upload-time = "2025-08-08T18:26:51.864Z" },
-    { url = "https://files.pythonhosted.org/packages/9b/02/c8f4f6c9204526daf3d760f4aa555a7a33ad0e60843eac025ccfd6ff4a93/tornado-6.5.2-cp39-abi3-musllinux_1_2_i686.whl", hash = "sha256:74db443e0f5251be86cbf37929f84d8c20c27a355dd452a5cfa2aada0d001ec4", size = 443973, upload-time = "2025-08-08T18:26:53.625Z" },
-    { url = "https://files.pythonhosted.org/packages/ae/2d/f5f5707b655ce2317190183868cd0f6822a1121b4baeae509ceb9590d0bd/tornado-6.5.2-cp39-abi3-musllinux_1_2_x86_64.whl", hash = "sha256:b5e735ab2889d7ed33b32a459cac490eda71a1ba6857b0118de476ab6c366c04", size = 443954, upload-time = "2025-08-08T18:26:55.072Z" },
-    { url = "https://files.pythonhosted.org/packages/e8/59/593bd0f40f7355806bf6573b47b8c22f8e1374c9b6fd03114bd6b7a3dcfd/tornado-6.5.2-cp39-abi3-win32.whl", hash = "sha256:c6f29e94d9b37a95013bb669616352ddb82e3bfe8326fccee50583caebc8a5f0", size = 445023, upload-time = "2025-08-08T18:26:56.677Z" },
-    { url = "https://files.pythonhosted.org/packages/c7/2a/f609b420c2f564a748a2d80ebfb2ee02a73ca80223af712fca591386cafb/tornado-6.5.2-cp39-abi3-win_amd64.whl", hash = "sha256:e56a5af51cc30dd2cae649429af65ca2f6571da29504a07995175df14c18f35f", size = 445427, upload-time = "2025-08-08T18:26:57.91Z" },
-    { url = "https://files.pythonhosted.org/packages/5e/4f/e1f65e8f8c76d73658b33d33b81eed4322fb5085350e4328d5c956f0c8f9/tornado-6.5.2-cp39-abi3-win_arm64.whl", hash = "sha256:d6c33dc3672e3a1f3618eb63b7ef4683a7688e7b9e6e8f0d9aa5726360a004af", size = 444456, upload-time = "2025-08-08T18:26:59.207Z" },
+    { url = "https://files.pythonhosted.org/packages/59/8c/77f5097695f4dd8255ecbd08b2a1ed8ba8b953d337804dd7080f199e12bf/tornado-6.5.5-cp39-abi3-macosx_10_9_universal2.whl", hash = "sha256:487dc9cc380e29f58c7ab88f9e27cdeef04b2140862e5076a66fb6bb68bb1bfa", size = 445983, upload-time = "2026-03-10T21:30:44.28Z" },
+    { url = "https://files.pythonhosted.org/packages/ab/5e/7625b76cd10f98f1516c36ce0346de62061156352353ef2da44e5c21523c/tornado-6.5.5-cp39-abi3-macosx_10_9_x86_64.whl", hash = "sha256:65a7f1d46d4bb41df1ac99f5fcb685fb25c7e61613742d5108b010975a9a6521", size = 444246, upload-time = "2026-03-10T21:30:46.571Z" },
+    { url = "https://files.pythonhosted.org/packages/b2/04/7b5705d5b3c0fab088f434f9c83edac1573830ca49ccf29fb83bf7178eec/tornado-6.5.5-cp39-abi3-manylinux1_x86_64.manylinux_2_28_x86_64.manylinux_2_5_x86_64.whl", hash = "sha256:e74c92e8e65086b338fd56333fb9a68b9f6f2fe7ad532645a290a464bcf46be5", size = 447229, upload-time = "2026-03-10T21:30:48.273Z" },
+    { url = "https://files.pythonhosted.org/packages/34/01/74e034a30ef59afb4097ef8659515e96a39d910b712a89af76f5e4e1f93c/tornado-6.5.5-cp39-abi3-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:435319e9e340276428bbdb4e7fa732c2d399386d1de5686cb331ec8eee754f07", size = 448192, upload-time = "2026-03-10T21:30:51.22Z" },
+    { url = "https://files.pythonhosted.org/packages/be/00/fe9e02c5a96429fce1a1d15a517f5d8444f9c412e0bb9eadfbe3b0fc55bf/tornado-6.5.5-cp39-abi3-musllinux_1_2_aarch64.whl", hash = "sha256:3f54aa540bdbfee7b9eb268ead60e7d199de5021facd276819c193c0fb28ea4e", size = 448039, upload-time = "2026-03-10T21:30:53.52Z" },
+    { url = "https://files.pythonhosted.org/packages/82/9e/656ee4cec0398b1d18d0f1eb6372c41c6b889722641d84948351ae19556d/tornado-6.5.5-cp39-abi3-musllinux_1_2_x86_64.whl", hash = "sha256:36abed1754faeb80fbd6e64db2758091e1320f6bba74a4cf8c09cd18ccce8aca", size = 447445, upload-time = "2026-03-10T21:30:55.541Z" },
+    { url = "https://files.pythonhosted.org/packages/5a/76/4921c00511f88af86a33de770d64141170f1cfd9c00311aea689949e274e/tornado-6.5.5-cp39-abi3-win32.whl", hash = "sha256:dd3eafaaeec1c7f2f8fdcd5f964e8907ad788fe8a5a32c4426fbbdda621223b7", size = 448582, upload-time = "2026-03-10T21:30:57.142Z" },
+    { url = "https://files.pythonhosted.org/packages/2c/23/f6c6112a04d28eed765e374435fb1a9198f73e1ec4b4024184f21faeb1ad/tornado-6.5.5-cp39-abi3-win_amd64.whl", hash = "sha256:6443a794ba961a9f619b1ae926a2e900ac20c34483eea67be4ed8f1e58d3ef7b", size = 448990, upload-time = "2026-03-10T21:30:58.857Z" },
+    { url = "https://files.pythonhosted.org/packages/b7/c8/876602cbc96469911f0939f703453c1157b0c826ecb05bdd32e023397d4e/tornado-6.5.5-cp39-abi3-win_arm64.whl", hash = "sha256:2c9a876e094109333f888539ddb2de4361743e5d21eece20688e3e351e4990a6", size = 448016, upload-time = "2026-03-10T21:31:00.43Z" },
 ]
 
 [[package]]

web/lib/opal/src/components/cards/card/Card.stories.tsx

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Card } from "@opal/components";
+
+const BACKGROUND_VARIANTS = ["none", "light", "heavy"] as const;
+const BORDER_VARIANTS = ["none", "dashed", "solid"] as const;
+const SIZE_VARIANTS = ["lg", "md", "sm", "xs", "2xs", "fit"] as const;
+
+const meta: Meta<typeof Card> = {
+  title: "opal/components/Card",
+  component: Card,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Card>;
+
+export const Default: Story = {
+  render: () => (
+    <Card>
+      <p>Default card with light background, no border, lg size.</p>
+    </Card>
+  ),
+};
+
+export const BackgroundVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-96">
+      {BACKGROUND_VARIANTS.map((bg) => (
+        <Card key={bg} backgroundVariant={bg} borderVariant="solid">
+          <p>backgroundVariant: {bg}</p>
+        </Card>
+      ))}
+    </div>
+  ),
+};
+
+export const BorderVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-96">
+      {BORDER_VARIANTS.map((border) => (
+        <Card key={border} borderVariant={border}>
+          <p>borderVariant: {border}</p>
+        </Card>
+      ))}
+    </div>
+  ),
+};
+
+export const SizeVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-96">
+      {SIZE_VARIANTS.map((size) => (
+        <Card key={size} sizeVariant={size} borderVariant="solid">
+          <p>sizeVariant: {size}</p>
+        </Card>
+      ))}
+    </div>
+  ),
+};
+
+export const AllCombinations: Story = {
+  render: () => (
+    <div className="flex flex-col gap-8">
+      {SIZE_VARIANTS.map((size) => (
+        <div key={size}>
+          <p className="font-bold pb-2">sizeVariant: {size}</p>
+          <div className="grid grid-cols-3 gap-4">
+            {BACKGROUND_VARIANTS.map((bg) =>
+              BORDER_VARIANTS.map((border) => (
+                <Card
+                  key={`${size}-${bg}-${border}`}
+                  sizeVariant={size}
+                  backgroundVariant={bg}
+                  borderVariant={border}
+                >
+                  <p className="text-xs">
+                    bg: {bg}, border: {border}
+                  </p>
+                </Card>
+              ))
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  ),
+};

web/lib/opal/src/components/cards/card/README.md

@@ -0,0 +1,67 @@
+# Card
+
+**Import:** `import { Card, type CardProps } from "@opal/components";`
+
+A plain container component with configurable background, border, padding, and rounding. Uses a simple `<div>` internally with `overflow-clip`.
+
+## Architecture
+
+The `sizeVariant` controls both padding and border-radius, mirroring the same mapping used by `Button` and `Interactive.Container`:
+
+| Size      | Padding | Rounding       |
+|-----------|---------|----------------|
+| `lg`      | `p-2`   | `rounded-12`   |
+| `md`      | `p-1`   | `rounded-08`   |
+| `sm`      | `p-1`   | `rounded-08`   |
+| `xs`      | `p-0.5` | `rounded-04`   |
+| `2xs`     | `p-0.5` | `rounded-04`   |
+| `fit`     | `p-0`   | `rounded-12`   |
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `sizeVariant` | `SizeVariant` | `"lg"` | Controls padding and border-radius |
+| `backgroundVariant` | `"none" \| "light" \| "heavy"` | `"light"` | Background fill intensity |
+| `borderVariant` | `"none" \| "dashed" \| "solid"` | `"none"` | Border style |
+| `ref` | `React.Ref<HTMLDivElement>` | — | Ref forwarded to the root div |
+| `children` | `React.ReactNode` | — | Card content |
+
+## Background Variants
+
+- **`none`** — Transparent background. Use for seamless inline content.
+- **`light`** — Subtle tinted background (`bg-background-tint-00`). The default, suitable for most cards.
+- **`heavy`** — Stronger tinted background (`bg-background-tint-01`). Use for emphasis or nested cards that need visual separation.
+
+## Border Variants
+
+- **`none`** — No border. Use when cards are visually grouped or in tight layouts.
+- **`dashed`** — Dashed border. Use for placeholder or empty states.
+- **`solid`** — Solid border. Use for prominent, standalone cards.
+
+## Usage
+
+```tsx
+import { Card } from "@opal/components";
+
+// Default card (light background, no border, lg padding + rounding)
+<Card>
+  <h2>Card Title</h2>
+  <p>Card content</p>
+</Card>
+
+// Compact card with solid border
+<Card borderVariant="solid" sizeVariant="sm">
+  <p>Compact card</p>
+</Card>
+
+// Empty state card
+<Card backgroundVariant="none" borderVariant="dashed">
+  <p>No items yet</p>
+</Card>
+
+// Heavy background, tight padding
+<Card backgroundVariant="heavy" sizeVariant="xs">
+  <p>Highlighted content</p>
+</Card>
+```

web/lib/opal/src/components/cards/card/components.tsx

@@ -0,0 +1,101 @@
+import "@opal/components/cards/card/styles.css";
+import type { SizeVariant } from "@opal/shared";
+import { sizeVariants } from "@opal/shared";
+import { cn } from "@opal/utils";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+type BackgroundVariant = "none" | "light" | "heavy";
+type BorderVariant = "none" | "dashed" | "solid";
+
+type CardProps = {
+  /**
+   * Size preset — controls padding and border-radius.
+   *
+   * Padding comes from the shared size scale. Rounding follows the same
+   * mapping as `Button` / `Interactive.Container`:
+   *
+   * | Size   | Rounding   |
+   * |--------|------------|
+   * | `lg`   | `default`  |
+   * | `md`–`sm` | `compact` |
+   * | `xs`–`2xs` | `mini`  |
+   * | `fit`  | `default`  |
+   *
+   * @default "lg"
+   */
+  sizeVariant?: SizeVariant;
+
+  /**
+   * Background fill intensity.
+   * - `"none"`: transparent background.
+   * - `"light"`: subtle tinted background (`bg-background-tint-00`).
+   * - `"heavy"`: stronger tinted background (`bg-background-tint-01`).
+   *
+   * @default "light"
+   */
+  backgroundVariant?: BackgroundVariant;
+
+  /**
+   * Border style.
+   * - `"none"`: no border.
+   * - `"dashed"`: dashed border.
+   * - `"solid"`: solid border.
+   *
+   * @default "none"
+   */
+  borderVariant?: BorderVariant;
+
+  /** Ref forwarded to the root `<div>`. */
+  ref?: React.Ref<HTMLDivElement>;
+
+  children?: React.ReactNode;
+};
+
+// ---------------------------------------------------------------------------
+// Rounding
+// ---------------------------------------------------------------------------
+
+/** Maps a size variant to a rounding class, mirroring the Button pattern. */
+const roundingForSize: Record<SizeVariant, string> = {
+  lg: "rounded-12",
+  md: "rounded-08",
+  sm: "rounded-08",
+  xs: "rounded-04",
+  "2xs": "rounded-04",
+  fit: "rounded-12",
+};
+
+// ---------------------------------------------------------------------------
+// Card
+// ---------------------------------------------------------------------------
+
+function Card({
+  sizeVariant = "lg",
+  backgroundVariant = "light",
+  borderVariant = "none",
+  ref,
+  children,
+}: CardProps) {
+  const { padding } = sizeVariants[sizeVariant];
+  const rounding = roundingForSize[sizeVariant];
+
+  return (
+    <div
+      ref={ref}
+      className={cn("opal-card", padding, rounding)}
+      data-background={backgroundVariant}
+      data-border={borderVariant}
+    >
+      {children}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Exports
+// ---------------------------------------------------------------------------
+
+export { Card, type CardProps, type BackgroundVariant, type BorderVariant };

web/lib/opal/src/components/cards/card/styles.css

@@ -0,0 +1,29 @@
+.opal-card {
+  @apply w-full overflow-clip;
+}
+
+/* Background variants */
+.opal-card[data-background="none"] {
+  @apply bg-transparent;
+}
+
+.opal-card[data-background="light"] {
+  @apply bg-background-tint-00;
+}
+
+.opal-card[data-background="heavy"] {
+  @apply bg-background-tint-01;
+}
+
+/* Border variants */
+.opal-card[data-border="none"] {
+  border: none;
+}
+
+.opal-card[data-border="dashed"] {
+  @apply border border-dashed;
+}
+
+.opal-card[data-border="solid"] {
+  @apply border;
+}

web/lib/opal/src/components/cards/empty-message-card/EmptyMessageCard.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { EmptyMessageCard } from "@opal/components";
+import { SvgSparkle, SvgUsers } from "@opal/icons";
+
+const SIZE_VARIANTS = ["lg", "md", "sm", "xs", "2xs", "fit"] as const;
+
+const meta: Meta<typeof EmptyMessageCard> = {
+  title: "opal/components/EmptyMessageCard",
+  component: EmptyMessageCard,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof EmptyMessageCard>;
+
+export const Default: Story = {
+  args: {
+    title: "No items available.",
+  },
+};
+
+export const WithCustomIcon: Story = {
+  args: {
+    icon: SvgSparkle,
+    title: "No agents selected.",
+  },
+};
+
+export const SizeVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-96">
+      {SIZE_VARIANTS.map((size) => (
+        <EmptyMessageCard
+          key={size}
+          sizeVariant={size}
+          title={`sizeVariant: ${size}`}
+        />
+      ))}
+    </div>
+  ),
+};
+
+export const Multiple: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-96">
+      <EmptyMessageCard title="No models available." />
+      <EmptyMessageCard icon={SvgSparkle} title="No agents selected." />
+      <EmptyMessageCard icon={SvgUsers} title="No groups added." />
+    </div>
+  ),
+};

web/lib/opal/src/components/cards/empty-message-card/README.md

@@ -0,0 +1,30 @@
+# EmptyMessageCard
+
+**Import:** `import { EmptyMessageCard, type EmptyMessageCardProps } from "@opal/components";`
+
+A pre-configured Card for empty states. Renders a transparent card with a dashed border containing a muted icon and message text using the `Content` layout.
+
+## Props
+
+| Prop          | Type                       | Default    | Description                                      |
+| ------------- | -------------------------- | ---------- | ------------------------------------------------ |
+| `icon`        | `IconFunctionComponent`    | `SvgEmpty` | Icon displayed alongside the title               |
+| `title`       | `string`                   | —          | Primary message text (required)                  |
+| `sizeVariant` | `SizeVariant`              | `"lg"`     | Size preset controlling padding and rounding     |
+| `ref`         | `React.Ref<HTMLDivElement>` | —          | Ref forwarded to the root div                    |
+
+## Usage
+
+```tsx
+import { EmptyMessageCard } from "@opal/components";
+import { SvgSparkle, SvgFileText } from "@opal/icons";
+
+// Default empty state
+<EmptyMessageCard title="No items yet." />
+
+// With custom icon
+<EmptyMessageCard icon={SvgSparkle} title="No agents selected." />
+
+// With custom size
+<EmptyMessageCard sizeVariant="sm" icon={SvgFileText} title="No documents available." />
+```

web/lib/opal/src/components/cards/empty-message-card/components.tsx

@@ -0,0 +1,57 @@
+import { Card } from "@opal/components/cards/card/components";
+import { Content } from "@opal/layouts";
+import { SvgEmpty } from "@opal/icons";
+import type { SizeVariant } from "@opal/shared";
+import type { IconFunctionComponent } from "@opal/types";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+type EmptyMessageCardProps = {
+  /** Icon displayed alongside the title. */
+  icon?: IconFunctionComponent;
+
+  /** Primary message text. */
+  title: string;
+
+  /** Size preset controlling padding and rounding of the card. */
+  sizeVariant?: SizeVariant;
+
+  /** Ref forwarded to the root Card div. */
+  ref?: React.Ref<HTMLDivElement>;
+};
+
+// ---------------------------------------------------------------------------
+// EmptyMessageCard
+// ---------------------------------------------------------------------------
+
+function EmptyMessageCard({
+  icon = SvgEmpty,
+  title,
+  sizeVariant = "lg",
+  ref,
+}: EmptyMessageCardProps) {
+  return (
+    <Card
+      ref={ref}
+      backgroundVariant="none"
+      borderVariant="dashed"
+      sizeVariant={sizeVariant}
+    >
+      <Content
+        icon={icon}
+        title={title}
+        sizePreset="secondary"
+        variant="body"
+        prominence="muted"
+      />
+    </Card>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Exports
+// ---------------------------------------------------------------------------
+
+export { EmptyMessageCard, type EmptyMessageCardProps };

web/lib/opal/src/components/index.ts

@@ -31,3 +31,17 @@ export {
   type TagProps,
   type TagColor,
 } from "@opal/components/tag/components";
+
+/* Card */
+export {
+  Card,
+  type CardProps,
+  type BackgroundVariant,
+  type BorderVariant,
+} from "@opal/components/cards/card/components";
+
+/* EmptyMessageCard */
+export {
+  EmptyMessageCard,
+  type EmptyMessageCardProps,
+} from "@opal/components/cards/empty-message-card/components";

web/lib/opal/src/layouts/content/BodyLayout.stories.tsx

@@ -1,87 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { BodyLayout } from "./BodyLayout";
-import { SvgSettings, SvgStar, SvgRefreshCw } from "@opal/icons";
-
-const meta = {
-  title: "Layouts/BodyLayout",
-  component: BodyLayout,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof BodyLayout>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-// Size presets
-// ---------------------------------------------------------------------------
-
-export const MainContent: Story = {
-  args: {
-    sizePreset: "main-content",
-    title: "Last synced 2 minutes ago",
-  },
-};
-
-export const MainUi: Story = {
-  args: {
-    sizePreset: "main-ui",
-    title: "Document count: 1,234",
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    sizePreset: "secondary",
-    title: "Updated 5 min ago",
-  },
-};
-
-// ---------------------------------------------------------------------------
-// With icon
-// ---------------------------------------------------------------------------
-
-export const WithIcon: Story = {
-  args: {
-    sizePreset: "main-ui",
-    title: "Settings",
-    icon: SvgSettings,
-  },
-};
-
-// ---------------------------------------------------------------------------
-// Orientations
-// ---------------------------------------------------------------------------
-
-export const Vertical: Story = {
-  args: {
-    sizePreset: "main-ui",
-    title: "Stacked layout",
-    icon: SvgStar,
-    orientation: "vertical",
-  },
-};
-
-export const Reverse: Story = {
-  args: {
-    sizePreset: "main-ui",
-    title: "Reverse layout",
-    icon: SvgRefreshCw,
-    orientation: "reverse",
-  },
-};
-
-// ---------------------------------------------------------------------------
-// Prominence
-// ---------------------------------------------------------------------------
-
-export const Muted: Story = {
-  args: {
-    sizePreset: "main-ui",
-    title: "Muted body text",
-    prominence: "muted",
-  },
-};

web/lib/opal/src/layouts/content/BodyLayout.tsx

@@ -1,134 +0,0 @@
-"use client";
-
-import type { IconFunctionComponent } from "@opal/types";
-import { cn } from "@opal/utils";
-
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
-type BodySizePreset = "main-content" | "main-ui" | "secondary";
-type BodyOrientation = "vertical" | "inline" | "reverse";
-type BodyProminence = "default" | "muted";
-
-interface BodyPresetConfig {
-  /** Icon width/height (CSS value). */
-  iconSize: string;
-  /** Tailwind padding class for the icon container. */
-  iconContainerPadding: string;
-  /** Tailwind font class for the title. */
-  titleFont: string;
-  /** Title line-height — also used as icon container min-height (CSS value). */
-  lineHeight: string;
-  /** Gap between icon container and title (CSS value). */
-  gap: string;
-}
-
-/** Props for {@link BodyLayout}. Does not support editing or descriptions. */
-interface BodyLayoutProps {
-  /** Optional icon component. */
-  icon?: IconFunctionComponent;
-
-  /** Main title text (read-only — editing is not supported). */
-  title: string;
-
-  /** Size preset. Default: `"main-ui"`. */
-  sizePreset?: BodySizePreset;
-
-  /** Layout orientation. Default: `"inline"`. */
-  orientation?: BodyOrientation;
-
-  /** Title prominence. Default: `"default"`. */
-  prominence?: BodyProminence;
-
-  /** Ref forwarded to the root `<div>`. */
-  ref?: React.Ref<HTMLDivElement>;
-}
-
-// ---------------------------------------------------------------------------
-// Presets
-// ---------------------------------------------------------------------------
-
-const BODY_PRESETS: Record<BodySizePreset, BodyPresetConfig> = {
-  "main-content": {
-    iconSize: "1rem",
-    iconContainerPadding: "p-1",
-    titleFont: "font-main-content-body",
-    lineHeight: "1.5rem",
-    gap: "0.125rem",
-  },
-  "main-ui": {
-    iconSize: "1rem",
-    iconContainerPadding: "p-0.5",
-    titleFont: "font-main-ui-action",
-    lineHeight: "1.25rem",
-    gap: "0.25rem",
-  },
-  secondary: {
-    iconSize: "0.75rem",
-    iconContainerPadding: "p-0.5",
-    titleFont: "font-secondary-action",
-    lineHeight: "1rem",
-    gap: "0.125rem",
-  },
-};
-
-// ---------------------------------------------------------------------------
-// BodyLayout
-// ---------------------------------------------------------------------------
-
-function BodyLayout({
-  icon: Icon,
-  title,
-  sizePreset = "main-ui",
-  orientation = "inline",
-  prominence = "default",
-  ref,
-}: BodyLayoutProps) {
-  const config = BODY_PRESETS[sizePreset];
-  const titleColorClass =
-    prominence === "muted" ? "text-text-03" : "text-text-04";
-
-  return (
-    <div
-      ref={ref}
-      className="opal-content-body"
-      data-orientation={orientation}
-      style={{ gap: config.gap }}
-    >
-      {Icon && (
-        <div
-          className={cn(
-            "opal-content-body-icon-container shrink-0",
-            config.iconContainerPadding
-          )}
-          style={{ minHeight: config.lineHeight }}
-        >
-          <Icon
-            className="opal-content-body-icon text-text-03"
-            style={{ width: config.iconSize, height: config.iconSize }}
-          />
-        </div>
-      )}
-
-      <span
-        className={cn(
-          "opal-content-body-title",
-          config.titleFont,
-          titleColorClass
-        )}
-        style={{ height: config.lineHeight }}
-      >
-        {title}
-      </span>
-    </div>
-  );
-}
-
-export {
-  BodyLayout,
-  type BodyLayoutProps,
-  type BodySizePreset,
-  type BodyOrientation,
-  type BodyProminence,
-};

web/lib/opal/src/layouts/content/HeadingLayout.stories.tsx

@@ -1,98 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { HeadingLayout } from "./HeadingLayout";
-import { SvgSettings, SvgStar } from "@opal/icons";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-
-const meta = {
-  title: "Layouts/HeadingLayout",
-  component: HeadingLayout,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-  },
-  decorators: [
-    (Story) => (
-      <TooltipPrimitive.Provider>
-        <Story />
-      </TooltipPrimitive.Provider>
-    ),
-  ],
-} satisfies Meta<typeof HeadingLayout>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-// Size presets
-// ---------------------------------------------------------------------------
-
-export const Headline: Story = {
-  args: {
-    sizePreset: "headline",
-    title: "Welcome to Onyx",
-    description: "Your enterprise search and AI assistant platform.",
-  },
-};
-
-export const Section: Story = {
-  args: {
-    sizePreset: "section",
-    title: "Configuration",
-  },
-};
-
-// ---------------------------------------------------------------------------
-// With icon
-// ---------------------------------------------------------------------------
-
-export const WithIcon: Story = {
-  args: {
-    sizePreset: "headline",
-    title: "Settings",
-    icon: SvgSettings,
-  },
-};
-
-export const SectionWithIcon: Story = {
-  args: {
-    sizePreset: "section",
-    variant: "section",
-    title: "Favorites",
-    icon: SvgStar,
-  },
-};
-
-// ---------------------------------------------------------------------------
-// Variants
-// ---------------------------------------------------------------------------
-
-export const SectionVariant: Story = {
-  args: {
-    sizePreset: "headline",
-    variant: "section",
-    title: "Inline Icon Heading",
-    icon: SvgSettings,
-  },
-};
-
-// ---------------------------------------------------------------------------
-// Editable
-// ---------------------------------------------------------------------------
-
-export const Editable: Story = {
-  args: {
-    sizePreset: "headline",
-    title: "Click to edit me",
-    editable: true,
-  },
-};
-
-export const EditableSection: Story = {
-  args: {
-    sizePreset: "section",
-    title: "Editable Section Title",
-    editable: true,
-    description: "This title can be edited inline.",
-  },
-};

web/lib/opal/src/layouts/content/HeadingLayout.tsx

@@ -1,218 +0,0 @@
-"use client";
-
-import { Button } from "@opal/components/buttons/button/components";
-import type { SizeVariant } from "@opal/shared";
-import SvgEdit from "@opal/icons/edit";
-import type { IconFunctionComponent } from "@opal/types";
-import { cn } from "@opal/utils";
-import { useRef, useState } from "react";
-
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
-type HeadingSizePreset = "headline" | "section";
-type HeadingVariant = "heading" | "section";
-
-interface HeadingPresetConfig {
-  /** Icon width/height (CSS value). */
-  iconSize: string;
-  /** Tailwind padding class for the icon container. */
-  iconContainerPadding: string;
-  /** Gap between icon container and content (CSS value). */
-  gap: string;
-  /** Tailwind font class for the title. */
-  titleFont: string;
-  /** Title line-height — also used as icon container min-height (CSS value). */
-  lineHeight: string;
-  /** Button `size` prop for the edit button. Uses the shared `SizeVariant` scale. */
-  editButtonSize: SizeVariant;
-  /** Tailwind padding class for the edit button container. */
-  editButtonPadding: string;
-}
-
-interface HeadingLayoutProps {
-  /** Optional icon component. */
-  icon?: IconFunctionComponent;
-
-  /** Main title text. */
-  title: string;
-
-  /** Optional description below the title. */
-  description?: string;
-
-  /** Enable inline editing of the title. */
-  editable?: boolean;
-
-  /** Called when the user commits an edit. */
-  onTitleChange?: (newTitle: string) => void;
-
-  /** Size preset. Default: `"headline"`. */
-  sizePreset?: HeadingSizePreset;
-
-  /** Variant controls icon placement. `"heading"` = top, `"section"` = inline. Default: `"heading"`. */
-  variant?: HeadingVariant;
-
-  /** Ref forwarded to the root `<div>`. */
-  ref?: React.Ref<HTMLDivElement>;
-}
-
-// ---------------------------------------------------------------------------
-// Presets
-// ---------------------------------------------------------------------------
-
-const HEADING_PRESETS: Record<HeadingSizePreset, HeadingPresetConfig> = {
-  headline: {
-    iconSize: "2rem",
-    iconContainerPadding: "p-0.5",
-    gap: "0.25rem",
-    titleFont: "font-heading-h2",
-    lineHeight: "2.25rem",
-    editButtonSize: "md",
-    editButtonPadding: "p-1",
-  },
-  section: {
-    iconSize: "1.25rem",
-    iconContainerPadding: "p-1",
-    gap: "0rem",
-    titleFont: "font-heading-h3",
-    lineHeight: "1.75rem",
-    editButtonSize: "sm",
-    editButtonPadding: "p-0.5",
-  },
-};
-
-// ---------------------------------------------------------------------------
-// HeadingLayout
-// ---------------------------------------------------------------------------
-
-function HeadingLayout({
-  sizePreset = "headline",
-  variant = "heading",
-  icon: Icon,
-  title,
-  description,
-  editable,
-  onTitleChange,
-  ref,
-}: HeadingLayoutProps) {
-  const [editing, setEditing] = useState(false);
-  const [editValue, setEditValue] = useState(title);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const config = HEADING_PRESETS[sizePreset];
-  const iconPlacement = variant === "heading" ? "top" : "left";
-
-  function startEditing() {
-    setEditValue(title);
-    setEditing(true);
-  }
-
-  function commit() {
-    const value = editValue.trim();
-    if (value && value !== title) onTitleChange?.(value);
-    setEditing(false);
-  }
-
-  return (
-    <div
-      ref={ref}
-      className="opal-content-heading"
-      data-icon-placement={iconPlacement}
-      style={{ gap: iconPlacement === "left" ? config.gap : undefined }}
-    >
-      {Icon && (
-        <div
-          className={cn(
-            "opal-content-heading-icon-container shrink-0",
-            config.iconContainerPadding
-          )}
-          style={{ minHeight: config.lineHeight }}
-        >
-          <Icon
-            className="opal-content-heading-icon"
-            style={{ width: config.iconSize, height: config.iconSize }}
-          />
-        </div>
-      )}
-
-      <div className="opal-content-heading-body">
-        <div className="opal-content-heading-title-row">
-          {editing ? (
-            <div className="opal-content-heading-input-sizer">
-              <span
-                className={cn(
-                  "opal-content-heading-input-mirror",
-                  config.titleFont
-                )}
-              >
-                {editValue || "\u00A0"}
-              </span>
-              <input
-                ref={inputRef}
-                className={cn(
-                  "opal-content-heading-input",
-                  config.titleFont,
-                  "text-text-04"
-                )}
-                value={editValue}
-                onChange={(e) => setEditValue(e.target.value)}
-                size={1}
-                autoFocus
-                onFocus={(e) => e.currentTarget.select()}
-                onBlur={commit}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter") commit();
-                  if (e.key === "Escape") {
-                    setEditValue(title);
-                    setEditing(false);
-                  }
-                }}
-                style={{ height: config.lineHeight }}
-              />
-            </div>
-          ) : (
-            <span
-              className={cn(
-                "opal-content-heading-title",
-                config.titleFont,
-                "text-text-04",
-                editable && "cursor-pointer"
-              )}
-              onClick={editable ? startEditing : undefined}
-              style={{ height: config.lineHeight }}
-            >
-              {title}
-            </span>
-          )}
-
-          {editable && !editing && (
-            <div
-              className={cn(
-                "opal-content-heading-edit-button",
-                config.editButtonPadding
-              )}
-            >
-              <Button
-                icon={SvgEdit}
-                prominence="internal"
-                size={config.editButtonSize}
-                tooltip="Edit"
-                tooltipSide="right"
-                onClick={startEditing}
-              />
-            </div>
-          )}
-        </div>
-
-        {description && (
-          <div className="opal-content-heading-description font-secondary-body text-text-03">
-            {description}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export { HeadingLayout, type HeadingLayoutProps, type HeadingSizePreset };

web/lib/opal/src/layouts/content/LabelLayout.stories.tsx

@@ -1,154 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { LabelLayout } from "./LabelLayout";
-import { SvgSettings, SvgStar } from "@opal/icons";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-
-const meta = {
-  title: "Layouts/LabelLayout",
-  component: LabelLayout,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-  },
-  decorators: [
-    (Story) => (
-      <TooltipPrimitive.Provider>
-        <Story />
-      </TooltipPrimitive.Provider>
-    ),
-  ],
-} satisfies Meta<typeof LabelLayout>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-// Size presets
-// ---------------------------------------------------------------------------
-
-export const MainContent: Story = {
-  args: {
-    sizePreset: "main-content",
-    title: "Display Name",
-  },
-};
-
-export const MainUi: Story = {
-  args: {
-    sizePreset: "main-ui",
-    title: "Email Address",
-  },
-};
-
-export const SecondaryPreset: Story = {
-  args: {
-    sizePreset: "secondary",
-    title: "API Key",
-  },
-};
-
-// ---------------------------------------------------------------------------
-// With description
-// ---------------------------------------------------------------------------
-
-export const WithDescription: Story = {
-  args: {
-    sizePreset: "main-content",
-    title: "Workspace Name",
-    description: "The name displayed across your organization.",
-  },
-};
-
-// ---------------------------------------------------------------------------
-// With icon
-// ---------------------------------------------------------------------------
-
-export const WithIcon: Story = {
-  args: {
-    sizePreset: "main-ui",
-    title: "Settings",
-    icon: SvgSettings,
-  },
-};
-
-// ---------------------------------------------------------------------------
-// Optional
-// ---------------------------------------------------------------------------
-
-export const Optional: Story = {
-  args: {
-    sizePreset: "main-content",
-    title: "Phone Number",
-    optional: true,
-  },
-};
-
-// ---------------------------------------------------------------------------
-// Aux icons
-// ---------------------------------------------------------------------------
-
-export const AuxInfoGray: Story = {
-  args: {
-    sizePreset: "main-content",
-    title: "Connection Status",
-    auxIcon: "info-gray",
-  },
-};
-
-export const AuxWarning: Story = {
-  args: {
-    sizePreset: "main-content",
-    title: "Rate Limit",
-    auxIcon: "warning",
-  },
-};
-
-export const AuxError: Story = {
-  args: {
-    sizePreset: "main-content",
-    title: "API Key",
-    auxIcon: "error",
-  },
-};
-
-// ---------------------------------------------------------------------------
-// With tag
-// ---------------------------------------------------------------------------
-
-export const WithTag: Story = {
-  args: {
-    sizePreset: "main-ui",
-    title: "Knowledge Graph",
-    tag: { title: "Beta", color: "blue" },
-  },
-};
-
-// ---------------------------------------------------------------------------
-// Editable
-// ---------------------------------------------------------------------------
-
-export const Editable: Story = {
-  args: {
-    sizePreset: "main-ui",
-    title: "Click to edit",
-    editable: true,
-  },
-};
-
-// ---------------------------------------------------------------------------
-// Combined
-// ---------------------------------------------------------------------------
-
-export const FullFeatured: Story = {
-  args: {
-    sizePreset: "main-content",
-    title: "Custom Field",
-    icon: SvgStar,
-    description: "A custom field with all extras enabled.",
-    optional: true,
-    auxIcon: "info-blue",
-    tag: { title: "New", color: "green" },
-    editable: true,
-  },
-};

web/lib/opal/src/layouts/content/LabelLayout.tsx

@@ -1,286 +0,0 @@
-"use client";
-
-import { Button } from "@opal/components/buttons/button/components";
-import { Tag, type TagProps } from "@opal/components/tag/components";
-import type { SizeVariant } from "@opal/shared";
-import SvgAlertCircle from "@opal/icons/alert-circle";
-import SvgAlertTriangle from "@opal/icons/alert-triangle";
-import SvgEdit from "@opal/icons/edit";
-import SvgXOctagon from "@opal/icons/x-octagon";
-import type { IconFunctionComponent } from "@opal/types";
-import { cn } from "@opal/utils";
-import { useRef, useState } from "react";
-
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
-type LabelSizePreset = "main-content" | "main-ui" | "secondary";
-
-type LabelAuxIcon = "info-gray" | "info-blue" | "warning" | "error";
-
-interface LabelPresetConfig {
-  iconSize: string;
-  iconContainerPadding: string;
-  iconColorClass: string;
-  titleFont: string;
-  lineHeight: string;
-  gap: string;
-  /** Button `size` prop for the edit button. Uses the shared `SizeVariant` scale. */
-  editButtonSize: SizeVariant;
-  editButtonPadding: string;
-  optionalFont: string;
-  /** Aux icon size = lineHeight − 2 × p-0.5. */
-  auxIconSize: string;
-}
-
-interface LabelLayoutProps {
-  /** Optional icon component. */
-  icon?: IconFunctionComponent;
-
-  /** Main title text. */
-  title: string;
-
-  /** Optional description text below the title. */
-  description?: string;
-
-  /** Enable inline editing of the title. */
-  editable?: boolean;
-
-  /** Called when the user commits an edit. */
-  onTitleChange?: (newTitle: string) => void;
-
-  /** When `true`, renders "(Optional)" beside the title. */
-  optional?: boolean;
-
-  /** Auxiliary status icon rendered beside the title. */
-  auxIcon?: LabelAuxIcon;
-
-  /** Tag rendered beside the title. */
-  tag?: TagProps;
-
-  /** Size preset. Default: `"main-ui"`. */
-  sizePreset?: LabelSizePreset;
-
-  /** Ref forwarded to the root `<div>`. */
-  ref?: React.Ref<HTMLDivElement>;
-}
-
-// ---------------------------------------------------------------------------
-// Presets
-// ---------------------------------------------------------------------------
-
-const LABEL_PRESETS: Record<LabelSizePreset, LabelPresetConfig> = {
-  "main-content": {
-    iconSize: "1rem",
-    iconContainerPadding: "p-1",
-    iconColorClass: "text-text-04",
-    titleFont: "font-main-content-emphasis",
-    lineHeight: "1.5rem",
-    gap: "0.125rem",
-    editButtonSize: "sm",
-    editButtonPadding: "p-0",
-    optionalFont: "font-main-content-muted",
-    auxIconSize: "1.25rem",
-  },
-  "main-ui": {
-    iconSize: "1rem",
-    iconContainerPadding: "p-0.5",
-    iconColorClass: "text-text-03",
-    titleFont: "font-main-ui-action",
-    lineHeight: "1.25rem",
-    gap: "0.25rem",
-    editButtonSize: "xs",
-    editButtonPadding: "p-0",
-    optionalFont: "font-main-ui-muted",
-    auxIconSize: "1rem",
-  },
-  secondary: {
-    iconSize: "0.75rem",
-    iconContainerPadding: "p-0.5",
-    iconColorClass: "text-text-04",
-    titleFont: "font-secondary-action",
-    lineHeight: "1rem",
-    gap: "0.125rem",
-    editButtonSize: "2xs",
-    editButtonPadding: "p-0",
-    optionalFont: "font-secondary-action",
-    auxIconSize: "0.75rem",
-  },
-};
-
-// ---------------------------------------------------------------------------
-// LabelLayout
-// ---------------------------------------------------------------------------
-
-const AUX_ICON_CONFIG: Record<
-  LabelAuxIcon,
-  { icon: IconFunctionComponent; colorClass: string }
-> = {
-  "info-gray": { icon: SvgAlertCircle, colorClass: "text-text-02" },
-  "info-blue": { icon: SvgAlertCircle, colorClass: "text-status-info-05" },
-  warning: { icon: SvgAlertTriangle, colorClass: "text-status-warning-05" },
-  error: { icon: SvgXOctagon, colorClass: "text-status-error-05" },
-};
-
-function LabelLayout({
-  icon: Icon,
-  title,
-  description,
-  editable,
-  onTitleChange,
-  optional,
-  auxIcon,
-  tag,
-  sizePreset = "main-ui",
-  ref,
-}: LabelLayoutProps) {
-  const [editing, setEditing] = useState(false);
-  const [editValue, setEditValue] = useState(title);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const config = LABEL_PRESETS[sizePreset];
-
-  function startEditing() {
-    setEditValue(title);
-    setEditing(true);
-  }
-
-  function commit() {
-    const value = editValue.trim();
-    if (value && value !== title) onTitleChange?.(value);
-    setEditing(false);
-  }
-
-  return (
-    <div ref={ref} className="opal-content-label" style={{ gap: config.gap }}>
-      {Icon && (
-        <div
-          className={cn(
-            "opal-content-label-icon-container shrink-0",
-            config.iconContainerPadding
-          )}
-          style={{ minHeight: config.lineHeight }}
-        >
-          <Icon
-            className={cn("opal-content-label-icon", config.iconColorClass)}
-            style={{ width: config.iconSize, height: config.iconSize }}
-          />
-        </div>
-      )}
-
-      <div className="opal-content-label-body">
-        <div className="opal-content-label-title-row">
-          {editing ? (
-            <div className="opal-content-label-input-sizer">
-              <span
-                className={cn(
-                  "opal-content-label-input-mirror",
-                  config.titleFont
-                )}
-              >
-                {editValue || "\u00A0"}
-              </span>
-              <input
-                ref={inputRef}
-                className={cn(
-                  "opal-content-label-input",
-                  config.titleFont,
-                  "text-text-04"
-                )}
-                value={editValue}
-                onChange={(e) => setEditValue(e.target.value)}
-                size={1}
-                autoFocus
-                onFocus={(e) => e.currentTarget.select()}
-                onBlur={commit}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter") commit();
-                  if (e.key === "Escape") {
-                    setEditValue(title);
-                    setEditing(false);
-                  }
-                }}
-                style={{ height: config.lineHeight }}
-              />
-            </div>
-          ) : (
-            <span
-              className={cn(
-                "opal-content-label-title",
-                config.titleFont,
-                "text-text-04",
-                editable && "cursor-pointer"
-              )}
-              onClick={editable ? startEditing : undefined}
-              style={{ height: config.lineHeight }}
-            >
-              {title}
-            </span>
-          )}
-
-          {optional && (
-            <span
-              className={cn(config.optionalFont, "text-text-03 shrink-0")}
-              style={{ height: config.lineHeight }}
-            >
-              (Optional)
-            </span>
-          )}
-
-          {auxIcon &&
-            (() => {
-              const { icon: AuxIcon, colorClass } = AUX_ICON_CONFIG[auxIcon];
-              return (
-                <div
-                  className="opal-content-label-aux-icon shrink-0 p-0.5"
-                  style={{ height: config.lineHeight }}
-                >
-                  <AuxIcon
-                    className={colorClass}
-                    style={{
-                      width: config.auxIconSize,
-                      height: config.auxIconSize,
-                    }}
-                  />
-                </div>
-              );
-            })()}
-
-          {tag && <Tag {...tag} />}
-
-          {editable && !editing && (
-            <div
-              className={cn(
-                "opal-content-label-edit-button",
-                config.editButtonPadding
-              )}
-            >
-              <Button
-                icon={SvgEdit}
-                prominence="internal"
-                size={config.editButtonSize}
-                tooltip="Edit"
-                tooltipSide="right"
-                onClick={startEditing}
-              />
-            </div>
-          )}
-        </div>
-
-        {description && (
-          <div className="opal-content-label-description font-secondary-body text-text-03">
-            {description}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export {
-  LabelLayout,
-  type LabelLayoutProps,
-  type LabelSizePreset,
-  type LabelAuxIcon,
-};

web/src/app/craft/components/output-panel/ArtifactsTab.tsx

@@ -98,7 +98,7 @@ export default function ArtifactsTab({
   const handleWebappDownload = () => {
     if (!sessionId) return;
     const link = document.createElement("a");
-    link.href = `/api/build/sessions/${sessionId}/webapp/download`;
+    link.href = `/api/build/sessions/${sessionId}/webapp-download`;
     link.download = "";
     document.body.appendChild(link);
     link.click();

web/src/refresh-components/inputs/InputComboBox/InputComboBox.test.tsx

@@ -118,6 +118,21 @@ describe("InputComboBox", () => {
       expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
     });
 
+    test("shows all options on focus when a value is already selected", () => {
+      render(
+        <InputComboBox
+          placeholder="Select"
+          value="apple"
+          options={mockOptions}
+        />
+      );
+      const input = screen.getByDisplayValue("Apple");
+      fireEvent.focus(input);
+
+      const options = screen.getAllByRole("option");
+      expect(options.length).toBe(3);
+    });
+
     test("closes dropdown on tab", async () => {
       const user = setupUser();
       render(

web/src/refresh-components/inputs/InputComboBox/InputComboBox.tsx

@@ -322,24 +322,32 @@ const InputComboBox = ({
 
   const handleFocus = useCallback(() => {
     if (hasOptions) {
+      setInputValue("");
       setIsOpen(true);
-      setHighlightedIndex(-1); // Start with no highlight on focus
-      setIsKeyboardNav(false); // Start with mouse mode
+      setHighlightedIndex(-1);
+      setIsKeyboardNav(false);
     }
-  }, [hasOptions, setIsOpen, setHighlightedIndex, setIsKeyboardNav]);
+  }, [
+    hasOptions,
+    setInputValue,
+    setIsOpen,
+    setHighlightedIndex,
+    setIsKeyboardNav,
+  ]);
 
   const toggleDropdown = useCallback(() => {
     if (!disabled && hasOptions) {
       setIsOpen((prev) => {
         const newOpen = !prev;
         if (newOpen) {
-          setHighlightedIndex(-1); // Reset highlight when opening
+          setInputValue("");
+          setHighlightedIndex(-1);
         }
         return newOpen;
       });
       inputRef.current?.focus();
     }
-  }, [disabled, hasOptions, setIsOpen, setHighlightedIndex]);
+  }, [disabled, hasOptions, setIsOpen, setInputValue, setHighlightedIndex]);
 
   const autoId = useId();
   const fieldId = fieldContext?.baseId || name || `combo-box-${autoId}`;

web/src/refresh-components/inputs/InputComboBox/hooks.ts

@@ -20,21 +20,26 @@ export function useComboBoxState({ value, options }: UseComboBoxStateProps) {
   const [highlightedIndex, setHighlightedIndex] = useState(-1);
   const [isKeyboardNav, setIsKeyboardNav] = useState(false);
 
-  // State synchronization logic
-  // Only sync when the dropdown is closed or when value changes significantly
+  // Sync inputValue with the external value prop.
+  // When the dropdown is closed, always reflect the controlled value.
+  // When the dropdown is open, only sync if the *value prop itself* changes
+  // (e.g. parent programmatically updates it), not when inputValue changes
+  // (e.g. user clears the field on focus to browse all options).
   useEffect(() => {
-    // If dropdown is closed, always sync with prop value
     if (!isOpen) {
       setInputValue(value);
-    } else {
-      // If dropdown is open, only sync if the new value is an exact match with an option
-      // This prevents interference when user is typing
+    }
+  }, [value, isOpen]);
+
+  useEffect(() => {
+    if (isOpen) {
       const isExactOptionMatch = options.some((opt) => opt.value === value);
-      if (isExactOptionMatch && inputValue !== value) {
+      if (isExactOptionMatch) {
         setInputValue(value);
       }
     }
-  }, [value, isOpen, options, inputValue]);
+    // Only react to value prop changes while open, not inputValue changes
+  }, [value]);
 
   // Reset highlight and keyboard nav when closing dropdown
   useEffect(() => {