diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx index 55c1ab23b6001f6ee85a101c1c20d394aca67c62..80e03c5b45c5f96e6bbed126b6ee66ec699cf7f9 100644 --- a/apps/web/src/components/ChatView.tsx +++ b/apps/web/src/components/ChatView.tsx @@ -25,10 +25,7 @@ import { RuntimeMode, TerminalOpenInput, } from "@t3tools/contracts"; -import { - connectionStatusTitle, - type EnvironmentConnectionPresentation, -} from "@t3tools/client-runtime/connection"; +import { type EnvironmentConnectionPresentation } from "@t3tools/client-runtime/connection"; import { wasBootstrapThreadDeleted } from "@t3tools/client-runtime/errors"; import { type CodexArtifactTemplate } from "@t3tools/client-runtime/codex-artifact-templates"; import { effectiveSnoozed, threadWokeAt } from "@t3tools/client-runtime/state/thread-settled"; @@ -2267,21 +2264,20 @@ function ChatViewContent(props: ChatViewProps) { /> ), title: `${unavailableConnection.phase === "connecting" ? "Connecting" : "Reconnecting"} to ${activeEnvironmentUnavailableState.label}`, - description: "It may be finishing an update. One moment.", + description: "Finishing an update", }); } else { items.push({ id: `environment-unavailable:${activeEnvironmentUnavailableState.environmentId}`, variant: unavailableConnection.phase === "error" ? "error" : "warning", icon: , - title: `${activeEnvironmentUnavailableState.label}: ${connectionStatusTitle(unavailableConnection)}`, - description: - unavailableConnection.error ?? - "Reconnect this environment before sending messages or running actions.", + title: `${activeEnvironmentUnavailableState.label} is ${environmentReconnecting ? "reconnecting" : "offline"}`, + description: environmentReconnecting ? "Trying again" : "Reconnect to continue", actions: ( <> ); } return ( - ); diff --git a/apps/web/src/components/chat/ComposerBanner.tsx b/apps/web/src/components/chat/ComposerBanner.tsx index c1de09e415dc374593296a2674a36e62bf9f370a..3200c2e196e6402902ea8316898dfd00e222b027 100644 --- a/apps/web/src/components/chat/ComposerBanner.tsx +++ b/apps/web/src/components/chat/ComposerBanner.tsx @@ -143,11 +143,13 @@ function Column({ className, ...props }: ComponentProps<"div">) { function Root({ className, + density = "default", placement = "attached", variant = "default", width = "fill", ...props }: ComponentProps<"div"> & { + density?: "default" | "comfortable"; placement?: "attached" | "floating"; variant?: ComposerBannerVariant; width?: "fill" | "content"; @@ -155,7 +157,8 @@ function Root({ return ( [data-slot=composer-banner-actions]]:grid-cols-[var(--composer-banner-icon-column)_minmax(0,1fr)]", "[&:is(button)]:cursor-pointer [&:is(button)]:rounded-[0.5rem] [&:is(button)]:focus-visible:outline-2 [&:is(button)]:focus-visible:-outline-offset-2 [&:is(button)]:focus-visible:outline-ring", layout === "wrap-actions" && - "@max-[400px]:flex @max-[400px]:flex-wrap @max-[400px]:gap-y-1 @max-[400px]:*:data-[slot=composer-banner-actions]:ms-auto @max-[400px]:*:data-[slot=composer-banner-actions]:max-w-full @max-[400px]:has-[>[data-slot=composer-banner-icon]]:*:data-[slot=composer-banner-actions]:max-w-[calc(100%-var(--composer-banner-icon-column)-(--spacing(1)))] @max-[400px]:*:data-[slot=composer-banner-content]:min-h-(--composer-banner-icon-column) @max-[400px]:*:data-[slot=composer-banner-content]:flex-[1_1_10rem]", + "@max-[400px]:*:data-[slot=composer-banner-content]:min-h-(--composer-banner-icon-column)", className, ), "data-composer-banner-row": "true", @@ -243,6 +246,7 @@ function Actions({ className, ...props }: ComponentProps<"span">) { data-slot="composer-banner-actions" className={cn( "col-start-3 row-start-1 flex flex-wrap items-center justify-end gap-1", + "@max-[400px]:group-data-[composer-banner-layout=wrap-actions]/banner-row:has-[>:nth-child(2)]:col-start-2 @max-[400px]:group-data-[composer-banner-layout=wrap-actions]/banner-row:has-[>:nth-child(2)]:col-end-4 @max-[400px]:group-data-[composer-banner-layout=wrap-actions]/banner-row:has-[>:nth-child(2)]:row-start-2 @max-[400px]:group-data-[composer-banner-layout=wrap-actions]/banner-row:has-[>:nth-child(2)]:-ms-2 @max-[400px]:group-data-[composer-banner-layout=wrap-actions]/banner-row:has-[>:nth-child(2)]:justify-start", className, )} {...props} diff --git a/apps/web/src/components/chat/ComposerBannerStack.tsx b/apps/web/src/components/chat/ComposerBannerStack.tsx index 6f335a82b37880e0b0b806dde00d7de9c6aa075b..fee545a4d1baab42758714c7f9fc0cb18b97c80b 100644 --- a/apps/web/src/components/chat/ComposerBannerStack.tsx +++ b/apps/web/src/components/chat/ComposerBannerStack.tsx @@ -1,6 +1,9 @@ +import { InfoIcon } from "lucide-react"; import { useEffect, useId, useLayoutEffect, useRef, useState, type ReactNode } from "react"; import { cn } from "~/lib/utils"; +import { Button } from "../ui/button"; +import { Popover, PopoverPopup, PopoverTrigger } from "../ui/popover"; import { ComposerBanner, type ComposerBannerVariant } from "./ComposerBanner"; // Match the duration-220 exit transition before removing a dismissed notice. @@ -15,14 +18,13 @@ export interface ComposerBannerStackItem { readonly description?: ReactNode; readonly children?: ReactNode; readonly actions?: ReactNode; - readonly className?: string; readonly dismissLabel?: string; readonly onDismiss?: () => void; } export type ComposerBannerStackContent = Pick< ComposerBannerStackItem, - "id" | "variant" | "priority" | "className" + "id" | "variant" | "priority" > & { readonly content: ReactNode }; type ComposerBannerStackEntry = ComposerBannerStackItem | ComposerBannerStackContent; @@ -252,37 +254,63 @@ function ComposerBannerStackAlert({ if ("content" in item) { return ( {item.content} ); } - return ( - + {item.icon} - + + + {item.title} + {item.description ? ( <> - {item.title} - {item.description} + + {item.description} + + + + } + > + + + + {item.description} + + - ) : ( - item.title - )} + ) : null} {item.actions || item.onDismiss ? ( diff --git a/apps/web/src/components/chat/ComposerStashBadge.tsx b/apps/web/src/components/chat/ComposerStashBadge.tsx index 6817839825a5e6e356af3e6426d570730e05c5bd..9a70094669faa3851549cf439b06a624562c1be7 100644 --- a/apps/web/src/components/chat/ComposerStashBadge.tsx +++ b/apps/web/src/components/chat/ComposerStashBadge.tsx @@ -34,7 +34,12 @@ export const ComposerStashBadge = memo(function ComposerStashBadge(props: { ); return ( - + } data-prompt-stash-badge="true" diff --git a/apps/web/src/components/chat/ComposerTasksBadge.tsx b/apps/web/src/components/chat/ComposerTasksBadge.tsx index 56e6316a64add2934126f4070f942df04b75acf4..ae2f4aa5849a68c44d6e6270cbd86b35226af92b 100644 --- a/apps/web/src/components/chat/ComposerTasksBadge.tsx +++ b/apps/web/src/components/chat/ComposerTasksBadge.tsx @@ -123,7 +123,9 @@ export const ComposerTasksBadge = memo(function ComposerTasksBadge({ return placement === "inline" ? ( row ) : ( - {row} + + {row} + ); }); diff --git a/apps/web/src/versionSkew.test.ts b/apps/web/src/versionSkew.test.ts index cb357c5377af2f9ae121a23cb826641f83772c80..c7bbe0e82796f76902fe585d26902befd6baf976 100644 --- a/apps/web/src/versionSkew.test.ts +++ b/apps/web/src/versionSkew.test.ts @@ -215,14 +215,7 @@ describe("versionSkew", () => { }); it("matches version-drift guidance to the advertised update path", () => { - expect(serverUpdateGuidance("respawn", "Remote server")).toBe( - "Update the Remote server so they stay in sync.", - ); - expect(serverUpdateGuidance("desktop-managed", "Desktop server")).toBe( - "Update the desktop app that runs the Desktop server.", - ); - expect(serverUpdateGuidance(null, "Local server")).toBe( - "Relaunch the Local server with the copied command to sync them.", - ); + expect(serverUpdateGuidance("respawn")).toBe("Update to stay in sync"); + expect(serverUpdateGuidance("desktop-managed")).toBe("Update the desktop app"); }); }); diff --git a/apps/web/src/versionSkew.ts b/apps/web/src/versionSkew.ts index a9f8f3e09fab3ef93277d93c1f09d230a7f1996a..97e5f847c3982e59aa84e55500d2c754b6901158 100644 --- a/apps/web/src/versionSkew.ts +++ b/apps/web/src/versionSkew.ts @@ -111,21 +111,8 @@ export function manualServerUpdateCommand(targetVersion: string): string { return `npx t3@${targetVersion}`; } -/** One sentence telling the user how to resolve version skew for a server, - matched to the update path it offers. */ -export function serverUpdateGuidance( - capability: ServerSelfUpdateCapability | null, - serverLabel: string, -): string { - switch (capability) { - case "boot-service": - case "respawn": - return `Update the ${serverLabel} so they stay in sync.`; - case "desktop-managed": - return `Update the desktop app that runs the ${serverLabel}.`; - default: - return `Relaunch the ${serverLabel} with the copied command to sync them.`; - } +export function serverUpdateGuidance(capability: ServerSelfUpdateCapability): string { + return capability === "desktop-managed" ? "Update the desktop app" : "Update to stay in sync"; } export function buildVersionMismatchDismissalKey(