@tea-agent/loop-agent 0.39.1 → 0.40.0-next.10

package/dist/worker/observe/static/operator-chrome.css

@@ -9,15 +9,15 @@
  */
 
 .och {
-	--och-canvas: var(--canvas, #f7f7f4);
-	--och-surface: var(--surface, #ffffff);
-	--och-surface-muted: var(--surface-muted, #f0efe9);
-	--och-ink: var(--ink, #26251e);
-	--och-body: var(--body, #5a5852);
-	--och-muted: var(--muted, #807d72);
-	--och-muted-soft: var(--muted-soft, #a09c92);
-	--och-hairline: var(--hairline, #e6e5e0);
-	--och-hairline-strong: var(--hairline-strong, #cfcdc4);
+	--och-canvas: var(--canvas, #f3f4f6);
+	--och-surface: var(--surface, #fbfcfd);
+	--och-surface-muted: var(--surface-muted, #eceef1);
+	--och-ink: var(--ink, #202124);
+	--och-body: var(--body, #50545b);
+	--och-muted: var(--muted, #767b84);
+	--och-muted-soft: var(--muted-soft, #9ca1aa);
+	--och-hairline: var(--hairline, #e1e3e7);
+	--och-hairline-strong: var(--hairline-strong, #cfd2d8);
 	--och-orange: var(--orange, #f54e00);
 	--och-orange-active: var(--orange-active, #d04200);
 	--och-green: var(--green, #1f8a65);
@@ -40,14 +40,16 @@
 	top: 0;
 	z-index: 50;
 	border-bottom: 1px solid var(--och-hairline);
-	background: color-mix(in srgb, var(--och-canvas) 88%, transparent);
+	background: var(--canvas-soft, var(--och-surface));
 	backdrop-filter: blur(12px);
 	-webkit-backdrop-filter: blur(12px);
 	font-family: inherit;
 }
 
 .och-inner {
-	width: min(100% - 48px, var(--och-shell-max));
+	box-sizing: border-box;
+	width: 100%;
+	padding-inline: 14px;
 	margin: 0 auto;
 }
 
@@ -57,7 +59,8 @@
 	display: flex;
 	align-items: center;
 	gap: 12px;
-	height: 54px;
+	/* DSH 2026-08-23：约 44px 与内容同色的压缩标题栏。 */
+	height: 44px;
 }
 
 .och-brand {
@@ -70,6 +73,7 @@
 	color: var(--och-ink);
 	text-decoration: none;
 	white-space: nowrap;
+	flex-shrink: 0;
 }
 .och-brand-mark {
 	display: block;
@@ -114,6 +118,19 @@
 	color: var(--och-muted);
 }
 
+.och-workspace-picker {
+	position: relative;
+	display: inline-flex;
+	min-width: 0;
+	flex-shrink: 0;
+}
+
+.och-workspace-trigger .och-repo-name {
+	max-width: 180px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
 .och-pop {
 	position: absolute;
 	top: 50px;
@@ -155,21 +172,122 @@
 	word-break: break-all;
 }
 
+.och-workspace-picker .och-pop {
+	top: 36px;
+	left: 0;
+	width: min(340px, calc(100vw - 28px));
+	min-width: 260px;
+	padding: 8px;
+}
+.och-workspace-picker .och-pop-title {
+	padding: 5px 7px 7px;
+	margin: 0;
+	font-size: 11px;
+	font-weight: 700;
+	letter-spacing: 0.06em;
+	color: var(--och-muted);
+}
+.och-workspace-option {
+	appearance: none;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+	width: 100%;
+	min-height: 48px;
+	padding: 7px 8px;
+	border: 0;
+	border-radius: 9px;
+	background: transparent;
+	color: var(--och-body);
+	font: inherit;
+	text-align: left;
+	cursor: pointer;
+}
+.och-workspace-option:hover,
+.och-workspace-option:focus-visible,
+.och-workspace-option[aria-checked="true"] {
+	background: color-mix(in srgb, var(--och-ink) 7%, transparent);
+	color: var(--och-ink);
+}
+.och-workspace-option-copy {
+	display: grid;
+	min-width: 0;
+	gap: 2px;
+}
+.och-workspace-option strong,
+.och-workspace-option small {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.och-workspace-option strong {
+	font-size: 13px;
+	font-weight: 650;
+}
+.och-workspace-option small {
+	font-size: 11px;
+	color: var(--och-muted);
+}
+.och-workspace-option > .och-icon {
+	color: var(--och-orange-active);
+	flex-shrink: 0;
+}
+.och-workspace-empty {
+	margin: 0;
+	padding: 12px 8px;
+	color: var(--och-muted);
+}
+
 /* 模式分段控件：全局唯一模式入口（重语法：ink 实底） */
 .och-mode {
-	display: inline-flex;
+	--och-mode-item-width: 92px;
+	position: relative;
+	display: grid;
+	grid-template-columns: repeat(3, var(--och-mode-item-width));
 	padding: 3px;
 	border: 1px solid var(--och-hairline);
 	border-radius: 999px;
 	background: var(--och-surface-muted);
 	flex-shrink: 0;
 }
+
+/* The product-mode switch is viewport-centered in Chat, Operate and Inspect;
+ * changing the active workspace must never move this global navigation. */
+@media (min-width: 720px) {
+	.och-mode {
+		position: fixed;
+		top: 3px;
+		left: 50vw;
+		transform: translateX(-50%);
+	}
+}
+/* DSH 2026-08-23：共享椭圆滑块，160-220ms 移动到选中椭圆。 */
+.och-mode-thumb {
+	position: absolute;
+	left: 0;
+	top: 0;
+	border-radius: 999px;
+	background: var(--och-ink);
+	box-shadow: 0 2px 8px rgba(38, 37, 30, 0.25);
+	transition: none;
+	pointer-events: none;
+}
+.och-mode-thumb.is-ready {
+	transition:
+		transform 190ms cubic-bezier(0.22, 1, 0.36, 1),
+		width 190ms cubic-bezier(0.22, 1, 0.36, 1),
+		height 190ms cubic-bezier(0.22, 1, 0.36, 1),
+		opacity 160ms ease;
+}
 .och-mode-btn {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
 	gap: 6px;
-	min-width: 92px;
+	box-sizing: border-box;
+	width: var(--och-mode-item-width);
+	min-width: var(--och-mode-item-width);
 	height: 30px;
 	padding: 0 14px;
 	border-radius: 999px;
@@ -190,9 +308,14 @@
 }
 .och-mode-btn.och-on,
 .och-mode-btn.och-on:hover {
-	background: var(--och-ink);
+	/* 滑块提供选中背景；文字反色保持可读。 */
 	color: #fff;
-	box-shadow: 0 2px 8px rgba(38, 37, 30, 0.25);
+	background: transparent;
+	box-shadow: none;
+}
+.och-mode-btn {
+	position: relative;
+	z-index: 1;
 }
 
 /* 对象上下文 chip：跨模式选中连续性 + 显式返回路径 */
@@ -452,9 +575,6 @@
 	.och-repo-fp {
 		display: none;
 	}
-	.och-mode-btn {
-		min-width: 0;
-	}
 	.och-workspace {
 		overflow-x: auto;
 	}
@@ -481,7 +601,7 @@
 
 @media (max-width: 760px) {
 	.och-inner {
-		width: min(100% - 24px, var(--och-shell-max));
+		padding-inline: 12px;
 	}
 	.och-global {
 		gap: 6px;
@@ -502,6 +622,9 @@
 	.och-mode-btn {
 		padding-inline: 10px;
 	}
+	.och-mode {
+		--och-mode-item-width: 78px;
+	}
 	.och-tab {
 		padding-inline: 10px;
 	}
@@ -509,6 +632,8 @@
 
 @media (prefers-reduced-motion: reduce) {
 	.och-mode-btn,
+	.och-mode-thumb,
+	.och-mode-thumb.is-ready,
 	.och-tab,
 	.och-repo,
 	.och-pi {

package/dist/worker/observe/static/operator-chrome.d.ts

@@ -25,20 +25,33 @@ export type ChromeRepoInfo = {
 	inspectReady?: boolean;
 };
 
+export type ChromeWorkspaceSwitcher = {
+	activeId: string | null;
+	loading: boolean;
+	items: Array<{
+		workspaceId: string;
+		name: string;
+		displayPath: string;
+	}>;
+};
+
 export type ChromeModel = {
-	mode: "operate" | "inspect";
+	mode: "chat" | "operate" | "inspect";
 	homeHref: string;
 	brand: string;
 	repo: ChromeRepoInfo | null;
+	workspaceSwitcher: ChromeWorkspaceSwitcher | null;
 	modeButtons: Array<{
-		id: "operate" | "inspect";
+		id: "chat" | "operate" | "inspect";
 		label: string;
 		href: string;
 		active: boolean;
 	}>;
 	context: InspectContext | null;
 	freshness: boolean;
+	statusVisible: boolean;
 	pi: { state: string; label: string; href: string; title: string };
+	workspaceTabsVisible: boolean;
 	tabs: Array<OperatorChromeTab & { active: boolean }>;
 	tabsAriaLabel: string;
 };
@@ -63,16 +76,20 @@ export function chromeStateFromHealth(body: unknown): {
 	repo: ChromeRepoInfo;
 };
 export function buildOperatorChromeModel(config: {
-	mode: "operate" | "inspect";
+	mode: "chat" | "operate" | "inspect";
 	activeTabHref?: string | null;
+	chatHref?: string;
 	operateHref?: string;
 	inspectHref?: string;
 	readinessState?: string;
 	readinessHref?: string;
 	readinessTitle?: string;
 	repo?: ChromeRepoInfo | null;
+	workspaceSwitcher?: ChromeWorkspaceSwitcher | null;
+	statusVisible?: boolean;
 	freshness?: boolean;
 	context?: InspectContext | null;
+	onSelectWorkspace?: (workspaceId: string) => void;
 }): ChromeModel;
 export function mountOperatorChrome(
 	root: HTMLElement,