Skip to content

fix: designer fe issues #794

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
May 7, 2025
Merged

fix: designer fe issues #794

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7371e5b
fix: style
shczhen May 7, 2025
7cfc999
fix: support more props type
shczhen May 7, 2025
5122963
fix: reset workspace after reloaded
shczhen May 7, 2025
84560a2
fix: refine codes
halajohn May 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
420 changes: 420 additions & 0 deletions bun.lock
View file
Open in desktop

Large diffs are not rendered by default.

302 changes: 227 additions & 75 deletions core/src/ten_manager/designer_frontend/bun.lock
View file
Open in desktop

Large diffs are not rendered by default.

84 changes: 42 additions & 42 deletions core/src/ten_manager/designer_frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,86 +11,86 @@
"test:e2e": "playwright test"
},
"dependencies": {
"@autoform/react": "^3.0.0",
"@autoform/zod": "^2.1.0",
"@autoform/react": "^3.1.0",
"@autoform/zod": "^2.2.0",
"@hookform/resolvers": "^4.1.3",
"@monaco-editor/react": "^4.7.0",
"@radix-ui/react-accordion": "^1.2.3",
"@radix-ui/react-checkbox": "^1.1.5",
"@radix-ui/react-context-menu": "^2.2.6",
"@radix-ui/react-dialog": "^1.1.6",
"@radix-ui/react-dropdown-menu": "^2.1.6",
"@radix-ui/react-label": "^2.1.3",
"@radix-ui/react-navigation-menu": "^1.2.5",
"@radix-ui/react-popover": "^1.1.6",
"@radix-ui/react-scroll-area": "^1.2.3",
"@radix-ui/react-select": "^2.1.7",
"@radix-ui/react-separator": "^1.1.2",
"@radix-ui/react-slot": "^1.2.0",
"@radix-ui/react-switch": "^1.1.4",
"@radix-ui/react-tabs": "^1.1.3",
"@radix-ui/react-toggle": "^1.1.3",
"@radix-ui/react-tooltip": "^1.1.8",
"@tanstack/react-table": "^8.21.2",
"@radix-ui/react-accordion": "^1.2.10",
"@radix-ui/react-checkbox": "^1.3.1",
"@radix-ui/react-context-menu": "^2.2.14",
"@radix-ui/react-dialog": "^1.1.13",
"@radix-ui/react-dropdown-menu": "^2.1.14",
"@radix-ui/react-label": "^2.1.6",
"@radix-ui/react-navigation-menu": "^1.2.12",
"@radix-ui/react-popover": "^1.1.13",
"@radix-ui/react-scroll-area": "^1.2.8",
"@radix-ui/react-select": "^2.2.4",
"@radix-ui/react-separator": "^1.1.6",
"@radix-ui/react-slot": "^1.2.2",
"@radix-ui/react-switch": "^1.2.4",
"@radix-ui/react-tabs": "^1.1.11",
"@radix-ui/react-toggle": "^1.1.8",
"@radix-ui/react-tooltip": "^1.2.6",
"@tanstack/react-table": "^8.21.3",
"@types/react-window": "^1.8.8",
"@xterm/addon-attach": "^0.11.0",
"@xterm/addon-fit": "^0.10.0",
"@xterm/addon-unicode11": "^0.8.0",
"@xterm/addon-web-links": "^0.11.0",
"@xterm/xterm": "^5.5.0",
"@xyflow/react": "^12.4.4",
"@xyflow/react": "^12.6.0",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"cmdk": "^1.1.1",
"dagre": "^0.8.5",
"date-fns": "^4.1.0",
"i18next": "^24.2.3",
"i18next-browser-languagedetector": "^8.0.4",
"i18next-browser-languagedetector": "^8.1.0",
"i18next-http-backend": "^3.0.2",
"lucide-react": "^0.473.0",
"monaco-editor": "^0.52.2",
"motion": "^12.5.0",
"motion": "^12.10.0",
"next-themes": "^0.4.6",
"pino": "^9.6.0",
"react": "^18.3.1",
"react-day-picker": "8.10.1",
"react-dom": "^18.3.1",
"react-hook-form": "^7.55.0",
"react-i18next": "^15.4.1",
"react-hook-form": "^7.56.2",
"react-i18next": "^15.5.1",
"react-icons": "^5.5.0",
"react-resizable-panels": "^2.1.7",
"react-virtualized-auto-sizer": "^1.0.25",
"react-resizable-panels": "^2.1.9",
"react-virtualized-auto-sizer": "^1.0.26",
"react-window": "^1.8.11",
"recharts": "^2.15.1",
"recharts": "^2.15.3",
"sonner": "^1.7.4",
"swr": "^2.3.3",
"tailwind-merge": "^3.2.0",
"tailwindcss-animate": "^1.0.7",
"zod": "^3.24.2",
"zustand": "^5.0.3"
"zod": "^3.24.4",
"zustand": "^5.0.4"
},
"devDependencies": {
"@eslint/js": "^9.22.0",
"@playwright/test": "^1.51.0",
"@tailwindcss/postcss": "^4.1.4",
"@eslint/js": "^9.26.0",
"@playwright/test": "^1.52.0",
"@tailwindcss/postcss": "^4.1.5",
"@types/dagre": "^0.7.52",
"@types/node": "^22.13.10",
"@types/react": "^18.3.18",
"@types/react-dom": "^18.3.5",
"@vitejs/plugin-react-swc": "^3.8.0",
"@types/node": "^22.15.14",
"@types/react": "^18.3.21",
"@types/react-dom": "^18.3.7",
"@vitejs/plugin-react-swc": "^3.9.0",
"esbuild": "^0.24.2",
"eslint": "^9.22.0",
"eslint": "^9.26.0",
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.19",
"eslint-plugin-react-refresh": "^0.4.20",
"globals": "^15.15.0",
"pino-pretty": "^13.0.0",
"playwright": "^1.51.0",
"playwright": "^1.52.0",
"postcss": "^8.5.3",
"prettier": "^3.5.3",
"prettier-plugin-tailwindcss": "^0.6.11",
"tailwindcss": "^4.1.4",
"tailwindcss": "^4.1.5",
"typescript": "~5.7.3",
"typescript-eslint": "^8.26.1",
"vite": "^6.2.2"
"typescript-eslint": "^8.32.0",
"vite": "^6.3.5"
}
}
8 changes: 6 additions & 2 deletions core/src/ten_manager/designer_frontend/src/components/Widget/AppsWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,6 +228,10 @@ export const AppsManagerWidget = (props: { className?: string }) => {
}
} finally {
mutate();
updateCurrentWorkspace({
graph: null,
});
setNodesAndEdges([], []);
setIsReloading(false);
}
};
Expand All @@ -254,8 +258,8 @@ export const AppsManagerWidget = (props: { className?: string }) => {
disableSearch: true,
title: t("popup.logViewer.appInstall"),
},
postActions: () => {
postReloadApps(baseDir);
postActions: async () => {
await reloadApps(baseDir);
},
},
popup: {
Expand Down
22 changes: 12 additions & 10 deletions core/src/ten_manager/designer_frontend/src/components/Widget/BackstageWidgets.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,27 @@
// Licensed under the Apache License, Version 2.0, with certain conditions.
// Refer to the "LICENSE" file in the root directory for more information.
//
import * as React from "react";

import { LogViewerBackstageWidget } from "@/components/Widget/LogViewerWidget";
import { useWidgetStore } from "@/store/widget";
import { EWidgetCategory } from "@/types/widgets";

export function BackstageWidgets() {
const { backstageWidgets } = useWidgetStore();

const [logViewerWidgets] = React.useMemo(() => {
const logViewerWidgets = backstageWidgets.filter(
(widget) => widget.category === EWidgetCategory.LogViewer
);
return [logViewerWidgets];
}, [backstageWidgets]);

return (
<>
{backstageWidgets.map((widget) => {
switch (widget.category) {
case EWidgetCategory.LogViewer:
return (
<LogViewerBackstageWidget key={widget.widget_id} {...widget} />
);
default:
return null;
}
})}
{logViewerWidgets.map((widget) => (
<LogViewerBackstageWidget key={widget.widget_id} {...widget} />
))}
</>
);
}
34 changes: 9 additions & 25 deletions ...src/ten_manager/designer_frontend/src/components/Widget/ExtensionWidget/ExtensionList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ export const ExtensionBaseItem = React.forwardRef<
className={cn(
"px-1 py-2",
"flex gap-2 w-full items-center max-w-full font-roboto h-fit",
"hover:bg-gray-100 dark:hover:bg-gray-800",
"hover:bg-ten-fill-4 rounded-sm",
Copy link
Preview

Copilot AI May 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] Confirm that the new hover background and border-radius settings align with the overall design standards and accessibility requirements.

Suggested change
"hover:bg-ten-fill-4 rounded-sm",
"hover:bg-hover-background rounded-standard",

Copilot uses AI. Check for mistakes.

{
"cursor-pointer": !!rest?.onClick && !readOnly,
},
Expand All @@ -205,48 +205,32 @@ export const ExtensionBaseItem = React.forwardRef<
<h3
className={cn(
"font-semibold w-full overflow-hidden text-ellipsis",
"text-gray-900 dark:text-gray-100"
"text-foreground"
)}
>
{item.name}
{_type === EPackageSource.Local && (
<span
className={cn(
"text-gray-500 dark:text-gray-400",
"text-xs font-normal"
)}
>
<span className={cn("text-ten-icontext-2", "text-xs font-normal")}>
{t("extensionStore.localAddonTip")}
</span>
)}
</h3>
<p className={cn("text-xs text-gray-500 dark:text-gray-400")}>
<p className={cn("text-xs text-ten-icontext-2 font-thin")}>
{item.type}
</p>
</div>
<div className="mt-auto flex flex-col items-end">
<div className="my-auto flex flex-col items-end">
{isInstalled ? (
<>
<Button
variant="ghost"
size="icon"
disabled
className={cn(
"size-4 [&_svg]:size-3 cursor-pointer",
"hover:bg-gray-200 dark:hover:bg-gray-700"
)}
>
<CheckIcon className="" />
</Button>
<CheckIcon className="size-4" />
</>
) : (
<Button
variant="secondary"
size="sm"
variant="outline"
size="xs"
className={cn(
"text-xs px-2 py-0.5 font-normal h-fit cursor-pointer",
"shadow-none rounded-none",
"hover:bg-gray-200 dark:hover:bg-gray-700"
"shadow-none"
)}
disabled={readOnly || !currentWorkspace?.app?.base_dir}
onClick={handleInstall(
Expand Down
7 changes: 7 additions & 0 deletions core/src/ten_manager/designer_frontend/src/components/Widget/LogViewerWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,19 @@ export function LogViewerBackstageWidget(props: ILogViewerWidget) {
} = props;

const wsRef = React.useRef<WebSocket | null>(null);
const hasConnectedRef = React.useRef(false);

React.useEffect(() => {
if (!wsUrl || !scriptType || !script) {
return;
}

if (hasConnectedRef.current) {
return;
}

wsRef.current = new WebSocket(wsUrl);
hasConnectedRef.current = true;

wsRef.current.onopen = () => {
console.log("[LogViewerWidget] WebSocket connected!");
Expand Down Expand Up @@ -81,6 +87,7 @@ export function LogViewerBackstageWidget(props: ILogViewerWidget) {

return () => {
// Close the connection when the component is unmounted.
hasConnectedRef.current = false;
wsRef.current?.close();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
Expand Down
1 change: 1 addition & 0 deletions core/src/ten_manager/designer_frontend/src/components/Widget/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export const convertExtensionPropertySchema2ZodSchema = (
switch (type) {
case "int64":
case "int32":
case "uint32":
zodType = z.coerce
.number()
.superRefine(
Expand Down
2 changes: 1 addition & 1 deletion core/src/ten_manager/designer_frontend/src/components/ui/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const buttonVariants = cva(
},
size: {
default: "h-[var(--size-base)] px-4 py-2",
xs: "h-[var(--size-xs)] rounded-md px-2 text-xs [_svg]:size-3",
xs: "h-[var(--size-xs)] rounded-sm px-2 text-xs [_svg]:size-3",
sm: "h-[var(--size-sm)] rounded-md px-3 text-xs",
lg: "h-[var(--size-lg)] rounded-md px-8",
xl: "h-[var(--size-xl)] rounded-md px-8",
Expand Down
2 changes: 1 addition & 1 deletion core/src/ten_manager/designer_frontend/src/components/ui/Input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
<input
type={type}
className={cn(
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
className
)}
ref={ref}
Expand Down
2 changes: 1 addition & 1 deletion core/src/ten_manager/designer_frontend/src/components/ui/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ function SelectTrigger({
<SelectPrimitive.Trigger
data-slot="select-trigger"
className={cn(
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex h-9 w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex h-9 w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
Expand Down
2 changes: 1 addition & 1 deletion core/src/ten_manager/designer_frontend/src/types/widgets.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ export interface ILogViewerWidgetData<T extends ELogViewerScriptType> {
scriptType: T;
script: z.infer<(typeof LogViewerScriptSchemaMap)[T]>;
options?: ILogViewerWidgetOptions;
postActions?: () => void;
postActions?: () => void | Promise<void>;
Copy link
Preview

Copilot AI May 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ensure that consumers of the ILogViewerWidgetData interface are updated to handle asynchronous postActions, and consider adding documentation to clarify this change.

Suggested change
postActions?: () => void | Promise<void>;
/**
* A function to execute post-actions after the main script execution.
* This function can be asynchronous, so consumers should handle it properly
* (e.g., by awaiting it if it returns a Promise).
*/
postActions?: TPostActions;
export type TPostActions = () => void | Promise<void>;

Copilot uses AI. Check for mistakes.

}

export interface ILogViewerWidget
Expand Down
26 changes: 26 additions & 0 deletions core/src/ten_runtime/binding/nodejs/bun.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
{
"lockfileVersion": 1,
"workspaces": {
"": {
"name": "ten-runtime-nodejs",
"devDependencies": {
"@types/node": "^18.14.5",
"source-map-support": "^0.5.21",
"typescript": "^5.7.2",
},
},
},
"packages": {
"@types/node": ["@types/node@18.19.97", "", { "dependencies": { "undici-types": "~5.26.4" } }, "sha512-4r3Y9EuCJjWduiam85Fo4GBQtneaEuoaBSdiKo+o6qwQUh0JFVBe7cRUK6I6yVzA0S1gBJJfoQx4VtBH4e5ikg=="],

"buffer-from": ["buffer-from@1.1.2", "", {}, "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="],

"source-map": ["source-map@0.6.1", "", {}, "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="],

"source-map-support": ["source-map-support@0.5.21", "", { "dependencies": { "buffer-from": "^1.0.0", "source-map": "^0.6.0" } }, "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w=="],

"typescript": ["typescript@5.8.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ=="],

"undici-types": ["undici-types@5.26.5", "", {}, "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="],
}
}
4 changes: 2 additions & 2 deletions core/src/ten_runtime/binding/nodejs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@
"build": "tsc --listEmittedFiles"
},
"devDependencies": {
"@types/node": "^18.14.5",
"@types/node": "^18.19.97",
"source-map-support": "^0.5.21",
"typescript": "^5.7.2"
"typescript": "^5.8.3"
},
"main": "build/index.js",
"types": "build/index.d.ts"
Expand Down
10 changes: 5 additions & 5 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
{
"devDependencies": {
"@types/node": "^22.13.5",
"eslint": "^9.21.0",
"eslint-config-prettier": "^10.1.1",
"eslint-plugin-prettier": "^5.2.6",
"@types/node": "^22.15.14",
"eslint": "^9.26.0",
"eslint-config-prettier": "^10.1.3",
"eslint-plugin-prettier": "^5.4.0",
"prettier": "^3.5.3",
"typescript-eslint": "^8.29.0"
"typescript-eslint": "^8.32.0"
}
}
Loading