fix(hub): minor polishing (#2444)

jog1t · jog1t · commit b2e5f8fe65a2 · 2025-05-15T18:30:44.000Z
&lt;!-- Please make sure there is an issue that this PR is correlated to. --&gt;

## Changes

&lt;!-- If there are frontend changes, please include screenshots. --&gt;
diff --git a/frontend/apps/hub/src/components/command-panel.tsx b/frontend/apps/hub/src/components/command-panel.tsx
@@ -146,7 +146,7 @@ export function CommandPanel({ className }: { className?: string }) {
 				)}
 			>
 				<span className="hidden @[100px]:inline-flex">Search...</span>
-				<Kbd className="@[100px]:absolute right-[0.3rem] top-[0.3rem] hidden sm:flex">
+				<Kbd className="@[100px]:absolute right-[0.3rem] top-1/2 -translate-y-1/2 hidden sm:flex">
 					<Kbd.Key />K
 				</Kbd>
 			</Button>
diff --git a/frontend/apps/hub/src/components/header/header.tsx b/frontend/apps/hub/src/components/header/header.tsx
@@ -18,6 +18,7 @@ import { HeaderRouteLoader } from "./header-route-loader";
 import { HeaderSubNav } from "./header-sub-nav";
 import { MobileHeaderSubNav } from "./mobile-header-sub-nav";
 import { NavItem } from "./nav-item";
+import { CommandPanel } from "../command-panel";
 
 const UserProfileButton = () => {
 	const { profile } = useAuth();
@@ -50,7 +51,7 @@ export function Header({ variant = "opaque" }: HeaderProps) {
 	return (
 		<header
 			className={cn(
-				" sticky top-0 z-10 flex items-center gap-4 border-b py-2",
+				" sticky top-0 z-10 flex items-center gap-4 border-b py-2 @container",
 				{
 					"bg-background/60 backdrop-blur": variant === "default",
 					"bg-background": variant === "opaque",
@@ -140,6 +141,7 @@ export function Header({ variant = "opaque" }: HeaderProps) {
 						</div>
 					</nav>
 					<div className="gap-6 font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm">
+						<CommandPanel className="h-full" />
 						<NavItem
 							asChild
 							className="hidden md:inline-block border px-4 py-2 rounded-md"
diff --git a/frontend/apps/hub/src/queries/global.ts b/frontend/apps/hub/src/queries/global.ts
@@ -133,6 +133,7 @@ const clientOptions: RivetClient.Options = {
 			...args,
 			withCredentials: true,
 			maxRetries: 0,
+			timeoutMs: 30_000 // 30 seconds
 		});
 
 		return response;
diff --git a/frontend/apps/hub/src/routes/_authenticated/_layout/projects/$projectNameId/environments/$environmentNameId._v2/actor-versions.tsx b/frontend/apps/hub/src/routes/_authenticated/_layout/projects/$projectNameId/environments/$environmentNameId._v2/actor-versions.tsx
@@ -154,7 +154,9 @@ function ProjectBuildsRoute() {
 										</TableCell>
 										<TableCell>
 											<ActorTags
+												className="max-w-[200px]"
 												{...build}
+												truncate={true}
 												excludeBuiltIn="builds"
 											/>
 										</TableCell>
diff --git a/frontend/apps/hub/src/routes/_authenticated/_layout/projects/$projectNameId/environments/$environmentNameId._v2/actors.tsx b/frontend/apps/hub/src/routes/_authenticated/_layout/projects/$projectNameId/environments/$environmentNameId._v2/actors.tsx
@@ -1,5 +1,6 @@
 import {
 	ActorFeature,
+	ActorNotFound,
 	ActorsActorDetails,
 	ActorsActorEmptyDetails,
 	ActorsListFiltersSchema,
@@ -31,7 +32,16 @@ function Actor() {
 	const actor = useAtomValue(currentActorAtom);
 
 	if (!actor) {
-		return null;
+		return (
+			<ActorNotFound
+				features={[
+					ActorFeature.Config,
+					ActorFeature.Logs,
+					ActorFeature.State,
+					ActorFeature.Connections,
+				]}
+			/>
+		);
 	}
 
 	return (
diff --git a/frontend/apps/hub/src/routes/_authenticated/_layout/projects/$projectNameId/environments/$environmentNameId._v2/containers.tsx b/frontend/apps/hub/src/routes/_authenticated/_layout/projects/$projectNameId/environments/$environmentNameId._v2/containers.tsx
@@ -1,5 +1,6 @@
 import {
 	ActorFeature,
+	ActorNotFound,
 	ActorsActorDetails,
 	ActorsActorEmptyDetails,
 	ActorsListFiltersSchema,
@@ -35,7 +36,11 @@ function Actor() {
 	const actor = useAtomValue(currentActorAtom);
 
 	if (!actor) {
-		return null;
+		return (
+			<ActorNotFound
+				features={[ActorFeature.Config, ActorFeature.Logs]}
+			/>
+		);
 	}
 
 	return (
@@ -68,7 +73,10 @@ const ACTORS_VIEW_CONTEXT = {
 		selectActor: (
 			<>
 				No Container selected.
-				<br /> Select a Container from the list to view its details.
+				<br />
+				<span className="text-sm text-muted-foreground">
+					Select a Container from the list to view its details.
+				</span>
 			</>
 		),
 		showActorList: "Show Container list",
@@ -78,14 +86,19 @@ const ACTORS_VIEW_CONTEXT = {
 		actorId: "Container ID",
 		noMoreActors: "No more Containers to load.",
 		noActorsMatchFilter: "No Containers match the filters.",
+		showHiddenActors: "Show hidden Containers",
 
 		createActorModal: {
 			title: "Create Container",
 			description:
 				"Choose a build to create a Container from. Container will be created using default settings.",
 		},
+
+		actorNotFound: "Container not found",
+		actorNotFoundDescription:
+			"Change your filters to find the Container you are looking for.",
 	},
-	requiresManager: false,
+	canCreate: false,
 };
 
 function Content() {
diff --git a/frontend/apps/hub/src/routes/_authenticated/_layout/projects/$projectNameId/environments/$environmentNameId._v2/logs.tsx b/frontend/apps/hub/src/routes/_authenticated/_layout/projects/$projectNameId/environments/$environmentNameId._v2/logs.tsx
@@ -27,6 +27,7 @@ import {
 	CommandGroup,
 	CommandItem,
 	SmallText,
+	LiveBadge,
 } from "@rivet-gg/components";
 import {
 	useInfiniteQuery,
@@ -238,6 +239,8 @@ function ProjectFunctionsRoute() {
 	return (
 		<div className="flex flex-col max-w-full max-h-full w-full h-full bg-card relative">
 			<div className="flex px-2 w-full border-b sticky top-0 min-h-[42px]">
+				<LiveBadge className="my-2" />
+				<div className="h-full border-l ml-2" />
 				<input
 					ref={searchInputRef}
 					type="text"
diff --git a/frontend/apps/hub/src/routes/_authenticated/_layout/projects/$projectNameId/environments/$environmentNameId/_v2.tsx b/frontend/apps/hub/src/routes/_authenticated/_layout/projects/$projectNameId/environments/$environmentNameId/_v2.tsx
@@ -78,7 +78,6 @@ function Sidebar() {
 			}}
 		>
 			<div className="flex flex-col">
-				<CommandPanel className="lg:w-full md:w-full mb-2" />
 				<ul className="w-full flex flex-col gap-2">
 					{SIDEBAR.map((item, index) => {
 						if ("items" in item) {
diff --git a/frontend/packages/components/src/actors/actor-build.tsx b/frontend/packages/components/src/actors/actor-build.tsx
@@ -40,13 +40,18 @@ export function ActorBuild({ actor }: ActorBuildProps) {
 				<Dl>
 					<Dt>ID</Dt>
 					<Dd>
-						<DiscreteCopyButton size="xs" value={data.id}>
+						<DiscreteCopyButton
+							size="xs"
+							value={data.id}
+							className="truncate"
+						>
 							{data.id}
 						</DiscreteCopyButton>
 					</Dd>
 					<Dt>Created</Dt>
 					<Dd>
 						<DiscreteCopyButton
+							className="truncate"
 							size="xs"
 							value={formatISO(data.createdAt)}
 						>
@@ -63,6 +68,7 @@ export function ActorBuild({ actor }: ActorBuildProps) {
 						>
 							<ActorTags
 								className="justify-start text-foreground"
+								truncate={false}
 								tags={data.tags}
 							/>
 						</Flex>
diff --git a/frontend/packages/components/src/actors/actor-context.tsx b/frontend/packages/components/src/actors/actor-context.tsx
@@ -220,6 +220,8 @@ export const filteredActorsAtom = atom((get) => {
 
 					return filter.value.includes(actor.status);
 				}
+
+				return true;
 			},
 		);
 
diff --git a/frontend/packages/components/src/actors/actor-general.tsx b/frontend/packages/components/src/actors/actor-general.tsx
@@ -53,6 +53,7 @@ export function ActorGeneral({ actor }: ActorGeneralProps) {
 						>
 							<ActorTags
 								className="justify-start text-foreground"
+								truncate={false}
 								tags={tags}
 							/>
 						</Flex>
diff --git a/frontend/packages/components/src/actors/actor-not-found.tsx b/frontend/packages/components/src/actors/actor-not-found.tsx
@@ -0,0 +1,56 @@
+import { Icon, faQuestionSquare } from "@rivet-gg/icons";
+import { useActorsView } from "./actors-view-context-provider";
+import { actorFiltersAtom, type ActorFeature } from "./actor-context";
+import { ActorTabs } from "./actors-actor-details";
+import { useAtomValue, useSetAtom } from "jotai";
+import { useCallback } from "react";
+import { selectAtom } from "jotai/utils";
+import { Button } from "../ui/button";
+import { FilterOp } from "../ui/filters";
+
+export function ActorNotFound({
+	features = [],
+}: { features?: ActorFeature[] }) {
+	const { copy } = useActorsView();
+
+	const setFilters = useSetAtom(actorFiltersAtom);
+	const hasDevMode = useAtomValue(
+		selectAtom(
+			actorFiltersAtom,
+			useCallback((filters) => filters.devMode, []),
+		),
+	);
+
+	return (
+		<div className="flex flex-col h-full flex-1 pt-2">
+			<ActorTabs disabled features={features}>
+				<div className="flex text-center text-foreground flex-1 justify-center items-center flex-col gap-2">
+					<Icon icon={faQuestionSquare} className="text-4xl" />
+					<p className="max-w-[400px]">{copy.actorNotFound}</p>
+					<p className="max-w-[400px] text-sm text-muted-foreground">
+						{copy.actorNotFoundDescription}
+					</p>
+
+					{!hasDevMode ? (
+						<Button
+							className="mt-3"
+							variant="outline"
+							size="sm"
+							onClick={() => {
+								setFilters((prev) => ({
+									...prev,
+									devMode: {
+										value: ["true"],
+										operator: FilterOp.EQUAL,
+									},
+								}));
+							}}
+						>
+							{copy.showHiddenActors}
+						</Button>
+					) : null}
+				</div>
+			</ActorTabs>
+		</div>
+	);
+}
diff --git a/frontend/packages/components/src/actors/actor-tags.tsx b/frontend/packages/components/src/actors/actor-tags.tsx
@@ -30,13 +30,17 @@ interface ActorTagsProps {
 	excludeBuiltIn?: keyof typeof BUILT_IN_TAGS;
 	className?: string;
 	truncate?: boolean;
+	copy?: boolean;
+	hoverable?: boolean;
 }
 
 export function ActorTags({
 	tags = {},
 	excludeBuiltIn = undefined,
 	truncate = true,
 	className,
+	hoverable = true,
+	copy = true,
 }: ActorTagsProps) {
 	return (
 		<div
@@ -54,32 +58,52 @@ export function ActorTags({
 								: true,
 						)
 						.sort(([a], [b]) => a.localeCompare(b))
-						.map(([key, value]) =>
-							truncate ? (
-								<WithTooltip
+						.map(([key, value]) => {
+							let trigger = truncate ? (
+								<ActorTag
 									key={key}
-									content={`${key}=${value}`}
-									trigger={
-										<DiscreteCopyButton
-											size="xs"
-											value={`${key}=${value}`}
-										>
-											<ActorTag className="flex-shrink-0 truncate max-w-52 cursor-pointer">
-												<span>
-													{key}={value}
-												</span>
-											</ActorTag>
-										</DiscreteCopyButton>
-									}
-								/>
-							) : (
-								<ActorTag key={key} className="flex-shrink-0">
+									className="break-all truncate max-w-52 cursor-pointer inline"
+								>
 									<span>
 										{key}={value}
 									</span>
 								</ActorTag>
-							),
-						)
+							) : (
+								<ActorTag key={key}>
+									<span className="inline break-all max-w-full whitespace-normal">
+										{key}={value}
+									</span>
+								</ActorTag>
+							);
+
+							trigger = copy ? (
+								<DiscreteCopyButton
+									key={key}
+									size="xs"
+									className={cn(
+										"h-auto py-0.5 text-left max-w-full min-w-0 break-all",
+										truncate && "flex max-w-52",
+									)}
+									value={`${key}=${value}`}
+								>
+									<Slot className="mr-1 inline">
+										{trigger}
+									</Slot>
+								</DiscreteCopyButton>
+							) : (
+								trigger
+							);
+
+							return truncate && hoverable && !copy ? (
+								<WithTooltip
+									key={key}
+									content={`${key}=${value}`}
+									trigger={trigger}
+								/>
+							) : (
+								trigger
+							);
+						})
 				: null}
 		</div>
 	);
diff --git a/frontend/packages/components/src/actors/actors-actor-details.tsx b/frontend/packages/components/src/actors/actors-actor-details.tsx
@@ -79,7 +79,7 @@ export const ActorsActorEmptyDetails = ({
 	);
 };
 
-function ActorTabs({
+export function ActorTabs({
 	tab,
 	features,
 	onTabChange,
diff --git a/frontend/packages/components/src/actors/actors-list-row.tsx b/frontend/packages/components/src/actors/actors-list-row.tsx
@@ -82,8 +82,10 @@ function Tags({ actor }: { actor: ActorAtom }) {
 				<div className="relative overflow-r-gradient">
 					<ActorTags
 						className="flex-nowrap empty:block overflow-hidden"
-						truncate={false}
+						truncate={true}
+						copy={false}
 						tags={tags}
+						hoverable={false}
 						excludeBuiltIn="actors"
 					/>
 				</div>
@@ -94,7 +96,9 @@ function Tags({ actor }: { actor: ActorAtom }) {
 					<ActorTags
 						excludeBuiltIn="actors"
 						className="empty:block"
+						copy={false}
 						truncate={false}
+						hoverable={false}
 						tags={tags}
 					/>
 				</>
diff --git a/frontend/packages/components/src/actors/actors-list.tsx b/frontend/packages/components/src/actors/actors-list.tsx
diff --git a/frontend/packages/components/src/actors/actors-view-context-provider.tsx b/frontend/packages/components/src/actors/actors-view-context-provider.tsx
diff --git a/frontend/packages/components/src/actors/create-actor-button.tsx b/frontend/packages/components/src/actors/create-actor-button.tsx
diff --git a/frontend/packages/components/src/actors/index.tsx b/frontend/packages/components/src/actors/index.tsx
diff --git a/frontend/packages/components/src/copy-area.tsx b/frontend/packages/components/src/copy-area.tsx
diff --git a/frontend/packages/components/src/ui/form.tsx b/frontend/packages/components/src/ui/form.tsx
diff --git a/frontend/packages/components/src/ui/typography.tsx b/frontend/packages/components/src/ui/typography.tsx

Original file line number	Diff line number	Diff line change
`@@ -146,7 +146,7 @@ export function CommandPanel({ className }: { className?: string }) {`
`146`	`146`	`)}`
`147`	`147`	`>`
`148`	`148`	`<span className="hidden @[100px]:inline-flex">Search...</span>`
`149`		`- <Kbd className="@[100px]:absolute right-[0.3rem] top-[0.3rem] hidden sm:flex">`
	`149`	`+ <Kbd className="@[100px]:absolute right-[0.3rem] top-1/2 -translate-y-1/2 hidden sm:flex">`
`150`	`150`	`<Kbd.Key />K`
`151`	`151`	`</Kbd>`
`152`	`152`	`</Button>`
Original file line number	Diff line number	Diff line change
`@@ -78,7 +78,6 @@ function Sidebar() {`
`78`	`78`	`}}`
`79`	`79`	`>`
`80`	`80`	`<div className="flex flex-col">`
`81`		`- <CommandPanel className="lg:w-full md:w-full mb-2" />`
`82`	`81`	`<ul className="w-full flex flex-col gap-2">`
`83`	`82`	`{SIDEBAR.map((item, index) => {`
`84`	`83`	`if ("items" in item) {`
Original file line number	Diff line number	Diff line change
`@@ -220,6 +220,8 @@ export const filteredActorsAtom = atom((get) => {`
`220`	`220`
`221`	`221`	`return filter.value.includes(actor.status);`
`222`	`222`	`}`
	`223`	`+`
	`224`	`+ return true;`
`223`	`225`	`},`
`224`	`226`	`);`
`225`	`227`