-
- Included:
-
+
+
+ {workspace.tags && workspace.tags.length > 0 && (
+
+
+
+
+
<Group gap="xs">
- {workspace.executables.included.map(
- (path, index) => (
- <Badge
- key={index}
- variant="light"
- color="green"
- >
- {path}
- </Badge>
- ),
- )}
+ <IconTag size={16} />
+ Tags
</Group>
- </div>
- )}
- {workspace.executables.excluded &&
- workspace.executables.excluded.length > 0 && (
- <div>
- <Text size="sm" fw={500}>
- Excluded:
- </Text>
+
+
+ {workspace.tags.map((tag, index) => (
+
+ {tag}
+
+ ))}
+
+
+
+
+
+ )}
+
+ {workspace.executables && (
+
+
+
+
+
<Group gap="xs">
- {workspace.executables.excluded.map(
- (path, index) => (
- <Badge key={index} variant="light" color="red">
- {path}
- </Badge>
- ),
+ <IconFilter size={16} />
+ Executable Filters
+ </Group>
+
+
+ {workspace.executables.included &&
+ workspace.executables.included.length > 0 && (
+
+
+ Included:
+
+
+ {workspace.executables.included.map(
+ (path, index) => (
+
+ {path}
+
+ )
+ )}
+
+
+ )}
+ {workspace.executables.excluded &&
+ workspace.executables.excluded.length > 0 && (
+
+
+ Excluded:
+
+
+ {workspace.executables.excluded.map(
+ (path, index) => (
+
+ {path}
+
+ )
+ )}
+
+
)}
+
+
+
+
+
+ )}
+
+ {workspace.verbAliases &&
+ Object.keys(workspace.verbAliases).length > 0 && (
+
+
+
+
+
+ <Group gap="xs">
+ <IconArrowsJoin size={16} />
+ Verb Aliases
+ </Group>
+
+
+
+ {Object.entries(workspace.verbAliases).map(
+ ([mainVerb, aliases]) => (
+
+ {mainVerb}
+
+ {" "}
+ {aliases.join(", ")}
+
+
+ )
+ )}
+
+
+
+
+
+
+ )}
+
+ {workspace.envFiles && workspace.envFiles.length > 0 && (
+
+
+
+
+
+ <Group gap="xs">
+ <IconCurrencyDollar size={16} />
+ Env Files
</Group>
- </div>
- )}
+
+
+
+ {workspace.envFiles.map((envFile, index) => (
+ {envFile}
+ ))}
+
+
+
+
-
-
-
-
- )}
-
-
+
+ )}
+
+
+ {workspace.fullDescription && (
+ <>
+
{workspace.fullDescription}
+
+ )}
+
+
+ ) : (
+
Error: Workspace not found
+ )}
+
);
}
diff --git a/desktop/src/pages/Workspace/WorkspaceRoute.tsx b/desktop/src/pages/Workspace/WorkspaceRoute.tsx
deleted file mode 100644
index d9e42c8a..00000000
--- a/desktop/src/pages/Workspace/WorkspaceRoute.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useParams } from "wouter";
-import { useWorkspace } from "../../hooks/useWorkspace";
-import { LoadingOverlay, Text } from "@mantine/core";
-import { PageWrapper } from "../../components/PageWrapper.tsx";
-import { Workspace } from "./Workspace";
-import { Welcome } from "../Welcome/Welcome";
-
-export function WorkspaceRoute() {
- const { workspaceName } = useParams();
- const { workspace, workspaceError, isWorkspaceLoading } = useWorkspace(
- workspaceName || "",
- );
-
- return (
-
- {isWorkspaceLoading && (
-
- )}
- {workspaceError && Error: {workspaceError.message}}
- {workspace ? (
-
- ) : (
-
- )}
-
- );
-}
diff --git a/desktop/src/pages/Workspaces/Workspaces.module.css b/desktop/src/pages/Workspaces/Workspaces.module.css
new file mode 100644
index 00000000..c8f6bb87
--- /dev/null
+++ b/desktop/src/pages/Workspaces/Workspaces.module.css
@@ -0,0 +1,117 @@
+/* Workspaces Table Styling */
+.filterSection {
+ margin-bottom: 1rem;
+ width: 75%;
+}
+
+.filterGroup {
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.searchInput {
+ flex: 2;
+}
+
+.tagFilter {
+ flex: 1;
+}
+
+.tableContainer {
+ position: relative;
+ overflow: hidden;
+}
+
+.table {
+ border-collapse: separate;
+ border-spacing: 0;
+}
+
+.table thead th {
+ font-weight: 600;
+ font-size: var(--mantine-font-size-md);
+ border-bottom: 1px solid var(--mantine-color-border-0);
+ color: var(--mantine-color-primary-0);
+}
+
+.table tbody tr {
+ transition: background-color 0.15s ease;
+ border-bottom: 1px dashed var(--mantine-color-border-0);
+}
+
+.table tbody td {
+ padding: 0.875rem 0.75rem;
+ vertical-align: middle;
+}
+
+.workspaceDetails {
+ display: flex;
+ flex-direction: column;
+ gap: 0.25rem;
+}
+
+.workspaceNameLink {
+ font-size: var(--mantine-font-size-sm) !important;
+ font-weight: 600 !important;
+ color: var(--mantine-color-tertiary-0) !important;
+ cursor: pointer;
+}
+
+.workspaceNameLink:hover {
+ color: var(--mantine-color-primary-0) !important;
+ text-decoration: underline;
+}
+
+.executableCount {
+ font-size: var(--mantine-font-size-xs) !important;
+ color: var(--mantine-color-dimmed) !important;
+}
+
+.locationCell {
+ max-width: 300px;
+ font-family: var(--mantine-font-family-monospace);
+ font-size: var(--mantine-font-size-xs);
+ color: var(--mantine-color-dimmed);
+}
+
+.pathText {
+ cursor: default;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ color: inherit;
+}
+
+.tagsCell {
+ max-width: 150px;
+}
+
+.tagsList {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.25rem;
+}
+
+.tag {
+ font-size: var(--mantine-font-size-xs);
+}
+
+.actionsCell {
+ width: 80px;
+ text-align: center;
+}
+
+.currentWorkspaceIndicator {
+ color: var(--mantine-color-emphasis-0);
+}
+
+.emptyState {
+ text-align: center;
+ padding: 3rem 1rem;
+ color: var(--mantine-color-dimmed);
+}
+
+.emptyStateText {
+ margin-top: 0.5rem;
+ font-size: var(--mantine-font-size-sm);
+}
diff --git a/desktop/src/pages/Workspaces/Workspaces.tsx b/desktop/src/pages/Workspaces/Workspaces.tsx
new file mode 100644
index 00000000..6656356a
--- /dev/null
+++ b/desktop/src/pages/Workspaces/Workspaces.tsx
@@ -0,0 +1,313 @@
+import {
+ ActionIcon,
+ Badge,
+ Box,
+ Button,
+ Group,
+ Menu,
+ MultiSelect,
+ Table,
+ Text,
+ TextInput,
+ Title,
+ Tooltip,
+} from "@mantine/core";
+import { useDebouncedValue, useElementSize } from "@mantine/hooks";
+import {
+ IconArrowRight,
+ IconCircleDashedCheck,
+ IconDotsVertical,
+ IconExternalLink,
+ IconFileSettings,
+ IconPlus,
+ IconSearch,
+ IconStar,
+ IconSwitch3,
+ IconTags,
+} from "@tabler/icons-react";
+import { useMemo, useState } from "react";
+import { useLocation } from "wouter";
+import { Hero } from "../../components/Hero";
+import { PageWrapper } from "../../components/PageWrapper.tsx";
+import { useAppContext } from "../../hooks/useAppContext.tsx";
+import { useConfig } from "../../hooks/useConfig";
+import { useNotifier } from "../../hooks/useNotifier";
+import { useWorkspaceExecutableCounts } from "../../hooks/useWorkspaceExecutableCounts";
+import { NotificationType } from "../../types/notification.ts";
+import { EnrichedWorkspace } from "../../types/workspace";
+import { stringToColor } from "../../utils/colors.ts";
+import { shortenPath } from "../../utils/paths";
+import classes from "./Workspaces.module.css";
+
+export function Workspaces() {
+ const { workspaces, config, setSelectedWorkspace } = useAppContext();
+ const { updateCurrentWorkspace } = useConfig();
+ const { getCountForWorkspace, isLoadingForWorkspace } = useWorkspaceExecutableCounts(workspaces || []);
+ const { ref: tableRef, width: tableWidth } = useElementSize();
+ const [searchQuery, setSearchQuery] = useState("");
+ const [selectedTags, setSelectedTags] = useState
([]);
+ const [debouncedSearch] = useDebouncedValue(searchQuery, 300);
+ const { setNotification } = useNotifier();
+ const [, setLocation] = useLocation();
+
+ // Estimate location column width (roughly 35% of table width, minus padding and margins)
+ const locationColumnWidth = Math.max(150, tableWidth * 0.35 - 60);
+
+ // Get all unique tags from workspaces
+ const allTags = useMemo(() => {
+ const tagSet = new Set();
+ workspaces?.forEach((workspace) => {
+ workspace.tags?.forEach((tag) => tagSet.add(tag));
+ });
+ return Array.from(tagSet).sort();
+ }, [workspaces]);
+
+ // Filter and sort workspaces
+ const filteredWorkspaces = useMemo(() => {
+ let filtered = workspaces || [];
+
+ if (debouncedSearch.trim()) {
+ const query = debouncedSearch.toLowerCase().trim();
+ filtered = filtered.filter(
+ (workspace) =>
+ workspace.name.toLowerCase().includes(query) ||
+ workspace.displayName?.toLowerCase().includes(query) ||
+ workspace.fullDescription?.toLowerCase().includes(query) ||
+ workspace.tags?.some((tag) => tag.toLowerCase().includes(query))
+ );
+ }
+
+ if (selectedTags.length > 0) {
+ filtered = filtered.filter((workspace) =>
+ workspace.tags?.some((tag) => selectedTags.includes(tag))
+ );
+ }
+
+ return filtered.sort((a, b) => a.name.localeCompare(b.name));
+ }, [workspaces, debouncedSearch, selectedTags]);
+
+ const handleWorkspaceAction = async (
+ action: string,
+ workspace: EnrichedWorkspace
+ ) => {
+ console.log(`Action: ${action} on workspace:`, workspace.name);
+ // TODO: Implement all actions
+ switch (action) {
+ case "switch":
+ setSelectedWorkspace(workspace.name);
+
+ try {
+ await updateCurrentWorkspace(workspace.name);
+ setNotification({
+ type: NotificationType.Success,
+ title: "Workspace switched",
+ message: `Switched to workspace: ${workspace.name}`,
+ autoClose: true,
+ });
+ } catch (error) {
+ setNotification({
+ type: NotificationType.Error,
+ title: "Error switching workspace",
+ message:
+ error instanceof Error
+ ? error.message
+ : "An unknown error occurred",
+ autoClose: true,
+ });
+ }
+ }
+ };
+
+ const renderExecutableCount = (workspaceName: string) => {
+ if (isLoadingForWorkspace(workspaceName)) {
+ return "loading...";
+ }
+
+ const count = getCountForWorkspace(workspaceName);
+ return `${count} executable${count !== 1 ? "s" : ""}`;
+ };
+
+ const handleWorkspaceSelection = (workspaceName: string) => {
+ setLocation(`/workspace/${workspaceName}`);
+ };
+
+ const rows = filteredWorkspaces.map((workspace) => (
+
+
+ {config != undefined && config.currentWorkspace == workspace.name && (
+
+
+
+ )}
+
+
+
+ handleWorkspaceSelection(workspace.name)}
+ >
+ {workspace.displayName || workspace.name}
+
+
+ ({renderExecutableCount(workspace.name)})
+
+
+
+
+
+
+ {shortenPath(workspace.path, locationColumnWidth)}
+
+
+
+
+
+ {workspace.tags?.map((tag, index) => (
+
+ {tag}
+
+ ))}
+
+
+
+
+
+
+ ));
+
+ return (
+ <>
+
+
+
+ Workspaces
+ Organize your automation workflows
+
+
+
+ {workspaces.length} registered
+
+ }
+ size="compact-xs"
+ color="tertiary"
+ >
+ Add Workspace
+
+
+
+
+
+
+ }
+ value={searchQuery}
+ onChange={(event) => setSearchQuery(event.currentTarget.value)}
+ />
+ }
+ data={allTags}
+ value={selectedTags}
+ onChange={setSelectedTags}
+ clearable
+ searchable
+ maxDropdownHeight={200}
+ />
+
+
+
+
+
+
+
+
+ Workspace
+ Location
+ Tags
+
+
+
+
+ {rows.length > 0 ? (
+ rows
+ ) : (
+
+
+
+
+
+ {searchQuery || selectedTags.length > 0
+ ? "No workspaces match your filters"
+ : "No workspaces found"}
+
+
+
+
+ )}
+
+
+
+
+
+ );
+}
diff --git a/desktop/src/pages/index.ts b/desktop/src/pages/index.ts
index f0fa152c..5ac45b56 100644
--- a/desktop/src/pages/index.ts
+++ b/desktop/src/pages/index.ts
@@ -3,3 +3,4 @@ export { Executable } from "./Executable/Executable";
export { Settings } from "./Settings/Settings";
export { Welcome } from "./Welcome/Welcome";
export { Workspace } from "./Workspace/Workspace";
+export { Workspaces } from "./Workspaces/Workspaces"
diff --git a/desktop/src/theme/ThemeProvider.tsx b/desktop/src/theme/ThemeProvider.tsx
index 10958308..2d83ea33 100644
--- a/desktop/src/theme/ThemeProvider.tsx
+++ b/desktop/src/theme/ThemeProvider.tsx
@@ -39,6 +39,8 @@ export function ThemeProvider({ children }: ThemeProviderProps) {
body: createColorArray(currentTheme.colors.body),
border: createColorArray(currentTheme.colors.border),
emphasis: createColorArray(currentTheme.colors.emphasis),
+ section: createColorArray(currentTheme.colors.background.hero),
+ appshell: createColorArray(currentTheme.colors.background.sidebar),
},
primaryColor: "primary",
primaryShade: 0,
@@ -87,6 +89,7 @@ export function ThemeProvider({ children }: ThemeProviderProps) {
sidebar: currentTheme.colors.background.sidebar,
header: currentTheme.colors.background.header,
card: currentTheme.colors.background.card,
+ hero: currentTheme.colors.background.header,
},
colors: {
body: currentTheme.colors.body,
@@ -97,7 +100,10 @@ export function ThemeProvider({ children }: ThemeProviderProps) {
});
return (
-
+
{children}
);
diff --git a/desktop/src/theme/themes.ts b/desktop/src/theme/themes.ts
index b857b8fb..610a884b 100644
--- a/desktop/src/theme/themes.ts
+++ b/desktop/src/theme/themes.ts
@@ -3,7 +3,7 @@ import { Theme, ThemeName } from "./types";
export const themes: Record = {
everforest: {
name: "everforest",
- darkMode: true,
+ darkMode: false,
colors: {
primary: "#7FBBB3",
secondary: "#83C092",
@@ -18,6 +18,7 @@ export const themes: Record = {
sidebar: "#1E2326",
header: "#1E2326",
card: "#F8F8F8",
+ hero: "#D3C6AA",
},
},
},
@@ -38,6 +39,7 @@ export const themes: Record = {
sidebar: "#141517",
header: "#141517",
card: "#25262B",
+ hero: "#252",
},
},
},
@@ -58,6 +60,7 @@ export const themes: Record = {
sidebar: "#1E1F29",
header: "#1E1F29",
card: "#44475A",
+ hero: "#f8f8f2",
},
},
},
@@ -78,6 +81,7 @@ export const themes: Record = {
sidebar: "#2D333B",
header: "#2D333B",
card: "#F8F8F8",
+ hero: "#373737",
},
},
},
@@ -98,6 +102,7 @@ export const themes: Record = {
sidebar: "#16161E",
header: "#16161E",
card: "#24283B",
+ hero: "#a9b1d6",
},
},
},
diff --git a/desktop/src/theme/types.ts b/desktop/src/theme/types.ts
index 1133ed39..58ec9311 100644
--- a/desktop/src/theme/types.ts
+++ b/desktop/src/theme/types.ts
@@ -26,6 +26,7 @@ export interface Theme {
sidebar: string;
header: string;
card: string;
+ hero: string;
};
};
}
diff --git a/desktop/src/utils/colors.ts b/desktop/src/utils/colors.ts
new file mode 100644
index 00000000..1ffaf2e5
--- /dev/null
+++ b/desktop/src/utils/colors.ts
@@ -0,0 +1,32 @@
+// djb2 string hash → 32-bit signed int
+function stringHash(str: string) {
+ let h = 5381;
+ for (let i = 0; i < str.length; i++) h = ((h << 5) + h) ^ str.charCodeAt(i);
+ return h >>> 0; // unsigned
+}
+
+// HSL → hex helpers
+function hslToRgb(h: number, s: number, l: number): [number, number, number] {
+ s /= 100;
+ l /= 100;
+ const k = (n: number) => (n + h / 30) % 12;
+ const a = s * Math.min(l, 1 - l);
+ const f = (n: number) =>
+ l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+ return [
+ Math.round(255 * f(0)),
+ Math.round(255 * f(8)),
+ Math.round(255 * f(4)),
+ ] as [number, number, number];
+}
+function rgbToHex([r, g, b]: [number, number, number]) {
+ return "#" + [r, g, b].map((x) => x.toString(16).padStart(2, "0")).join("");
+}
+
+export function stringToColor(str: string) {
+ const h = stringHash(str);
+ const hue = h % 360; // 0–359
+ const sat = 65; // tweak for vibrancy
+ const light = 55; // tweak for readability
+ return rgbToHex(hslToRgb(hue, sat, light));
+}
diff --git a/desktop/src/utils/paths.ts b/desktop/src/utils/paths.ts
new file mode 100644
index 00000000..f36a9366
--- /dev/null
+++ b/desktop/src/utils/paths.ts
@@ -0,0 +1,46 @@
+export function shortenPath(
+ path: string,
+ maxWidth: number,
+ minSegments: number = 2
+): string {
+ if (!path) return "";
+
+ const normalizedPath = path.replace(/\\/g, "/");
+ const segments = normalizedPath
+ .split("/")
+ .filter((segment) => segment.length > 0);
+
+ if (segments.length <= minSegments) {
+ return path;
+ }
+
+ const charBudget = Math.floor(maxWidth / 10);
+ const lastSegment = segments[segments.length - 1];
+
+ if (maxWidth < 200) {
+ if (segments.length === 1) return lastSegment;
+ const parentSegment = segments[segments.length - 2];
+ return ` …/${parentSegment}/${lastSegment}`;
+ }
+
+ const ellipsis = " …/";
+ const includedSegments = [lastSegment];
+ let currentLength = lastSegment.length;
+
+ // Add segments from right to left while we have budget
+ for (let i = segments.length - 2; i >= 0; i--) {
+ const segment = segments[i];
+ const newLength = currentLength + 1 + segment.length; // +1 for the '/' separator
+
+ if (newLength + ellipsis.length > charBudget && i > 0) {
+ return ellipsis + includedSegments.join("/");
+ }
+
+ includedSegments.unshift(segment);
+ currentLength = newLength;
+ }
+
+ // If we included all segments, add the leading slash for absolute path
+ const result = includedSegments.join("/");
+ return normalizedPath.startsWith("/") ? "/" + result : result;
+}