From dcec0d31ee42a63b01098a13c423cdb1167e7dab Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Sat, 18 Apr 2026 16:59:53 +0200
Subject: [PATCH] feat(workbench): scope-active badge on scene pills
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Phase 3 follow-up from docs/plans/scene-scope-empty-state.md — a small
Funnel icon now sits next to the scene count whenever the scene has an
explicit `scopeTagIds` set. Users can see at a glance that a scope
filter is active even when the module lists aren't empty, instead of
only noticing the filter when a list turns up zero results.

Only marks explicit scene-level scope; the agent-derived scope is
already signalled by the bound-agent avatar.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/workbench/SceneAppBar.svelte   | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/apps/mana/apps/web/src/lib/components/workbench/SceneAppBar.svelte b/apps/mana/apps/web/src/lib/components/workbench/SceneAppBar.svelte
index d92767b59..b070a1926 100644
--- a/apps/mana/apps/web/src/lib/components/workbench/SceneAppBar.svelte
+++ b/apps/mana/apps/web/src/lib/components/workbench/SceneAppBar.svelte
@@ -3,7 +3,7 @@
   Rendered by the layout's bottom-stack via bottomBarStore.
 -->
 <script lang="ts">
-	import { Plus, Check, X } from '@mana/shared-icons';
+	import { Plus, Check, X, Funnel } from '@mana/shared-icons';
 	import { tick } from 'svelte';
 	import type { CarouselPage } from '$lib/components/page-carousel/types';
 	import type { WorkbenchScene } from '$lib/types/workbench-scenes';
@@ -82,6 +82,7 @@
 
 			{#if isActive && pages.length > 0}
 				{@const boundAgent = scene.viewingAsAgentId ? agentById.get(scene.viewingAsAgentId) : null}
+				{@const hasScope = (scene.scopeTagIds?.length ?? 0) > 0}
 				<!-- Active scene + its app tabs wrapped in a visual group -->
 				<div class="scene-group">
 					<button
@@ -95,6 +96,11 @@
 							<span class="scene-agent-avatar">{boundAgent.avatar ?? '🤖'}</span>
 						{/if}
 						<span class="scene-name">{scene.name}</span>
+						{#if hasScope}
+							<span class="scope-badge" title="Bereichsfilter aktiv">
+								<Funnel size={10} weight="fill" />
+							</span>
+						{/if}
 						<span class="scene-count">{scene.openApps.length}</span>
 					</button>
 					<span class="group-sep"></span>
@@ -121,6 +127,7 @@
 				</div>
 			{:else}
 				{@const boundAgent = scene.viewingAsAgentId ? agentById.get(scene.viewingAsAgentId) : null}
+				{@const hasScope = (scene.scopeTagIds?.length ?? 0) > 0}
 				<button
 					type="button"
 					class="scene-pill"
@@ -133,6 +140,11 @@
 						<span class="scene-agent-avatar">{boundAgent.avatar ?? '🤖'}</span>
 					{/if}
 					<span class="scene-name">{scene.name}</span>
+					{#if hasScope}
+						<span class="scope-badge" title="Bereichsfilter aktiv">
+							<Funnel size={10} weight="fill" />
+						</span>
+					{/if}
 					<span class="scene-count">{scene.openApps.length}</span>
 				</button>
 			{/if}
@@ -245,6 +257,14 @@
 		font-weight: 500;
 		color: hsl(var(--color-muted-foreground));
 	}
+	.scope-badge {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		color: hsl(var(--color-primary));
+		opacity: 0.8;
+		flex-shrink: 0;
+	}
 	.group-sep {
 		width: 1px;
 		height: 1.25rem;