Changes full workspace config. Still some work to do ui + logic

2026-06-09 15:34:40 +01:00
parent 19df30326b
commit de3ee6470f
19 changed files with 1765 additions and 1476 deletions
@@ -1 +1 @@
-VITE_GATEWAY_BASE_URL=http://localhost:18080
+VITE_GATEWAY_BASE_URL=http://146.59.230.190:18080
@@ -7,7 +7,8 @@
    "chart-*",
    "maincharts-*",
    "climatecharts-*",
-    "meteocharts-*"
+    "meteocharts-*",
+    "workspace-*"
  ],
  "permissions": [
    "core:default",
@@ -20,6 +21,7 @@
    "core:window:allow-show",
    "core:window:allow-hide",
    "core:window:allow-set-focus",
+    "core:window:allow-set-title",

    "core:window:allow-minimize",
    "core:window:allow-maximize",
@@ -7,7 +7,7 @@ import { MeteoPage } from "../features/meteo/pages/MeteoPage";
 import { ClimateChartsPage } from "../features/climate/pages/ClimateChartsPage";
 import { ConsolePage } from "../features/console/pages/ConsolePage";
 import { MainChartsPage } from "../features/maincharts/pages/MainChartsPage";
-import { ChartWindowPage } from "../features/chartworkspace/pages/ChartWindowPage";
+import { WorkspaceWindowPage } from "../features/chartworkspace/pages/WorkspaceWindowPage";
 import { SettingsPage } from "../features/settings/pages/SettingsPage";
 import SynopticPage from "../features/synoptic/pages/SynopticPage";
 import MeteoChartsPage from "../features/meteo/pages/MeteoChartsPage";
@@ -38,13 +38,17 @@ function App() {
  const { authenticated } = useAuth();
  const [activePage, setActivePage] = useState<AppPage>("dashboard");

-  const isChartWindow = window.location.pathname.startsWith("/chart-window/");
+  const isWorkspaceWindow = window.location.pathname.startsWith("/workspace-window/");

-  if (isChartWindow) {
+  if (isWorkspaceWindow) {
    const params = new URLSearchParams(window.location.search);
    const theme = params.get("theme") === "light" ? "light" : "dark";

-    return <ChartWindowPage theme={theme} />;
+    return (
+      <RuntimeConfigProvider>
+        <WorkspaceWindowPage theme={theme} />
+      </RuntimeConfigProvider>
+    );
  }

  if (!authenticated) {
@@ -4,7 +4,6 @@ import {
    Loader2,
    ChevronDown,
    Download,
-    Maximize2,
    Save,
    Settings2,
    SlidersHorizontal,
@@ -73,8 +72,6 @@ type Props = {
    onIntervalChange: (interval: WorkspaceChartInterval) => void;
    onSave?: () => void;
    onExport?: () => void;
-    onDetach?: () => void;
-    onAttach?: () => void;
    loading?: boolean;
    configuredVariableCount?: number;
 };
@@ -127,8 +124,6 @@ export function WorkspaceChart({
    onIntervalChange,
    onSave,
    onExport,
-    onDetach,
-    onAttach,
    configuredVariableCount = chart.variables.length
 }: Props) {
    const isDark = theme === "dark";
@@ -360,16 +355,6 @@ export function WorkspaceChart({
                        </button>
                    )}

-                    {onDetach && onAttach && (
-                        <button
-                            type="button"
-                            onClick={detached ? onAttach : onDetach}
-                            title={detached ? "Repor janela" : "Destacar janela"}
-                            className={windowButtonClass(isDark)}
-                        >
-                            <Maximize2 className="h-4 w-4" />
-                        </button>
-                    )}
                </div>
            </header>

@@ -0,0 +1,113 @@
+import { authFetch } from "../../../lib/api/authFetch";
+import { getBackendApiUrl } from "../../../lib/api/gatewayConfig";
+import { readJsonResponse } from "../../../lib/api/readJsonResponse";
+import type { ChartLayoutMode } from "../hooks/useChartWorkspacePersistence";
+import type { ChartWorkspaceScope } from "../types";
+
+export type ChartWorkspaceResponse = {
+    id: number;
+    scope: ChartWorkspaceScope;
+    name: string;
+    sortOrder: number;
+    defaultWorkspace: boolean;
+    layoutMode: ChartLayoutMode;
+    chartsJson: string;
+    createdAt: string;
+    updatedAt: string;
+};
+
+export type ChartWorkspaceSaveRequest = {
+    name?: string;
+    sortOrder?: number;
+    defaultWorkspace?: boolean;
+    layoutMode: ChartLayoutMode;
+    chartsJson: string;
+};
+
+function workspaceUrl(workspaceId: number | null, scope: ChartWorkspaceScope) {
+    if (workspaceId !== null) {
+        return getBackendApiUrl(`/api/chart-workspaces/id/${workspaceId}`);
+    }
+
+    return getBackendApiUrl(`/api/chart-workspaces/${scope}`);
+}
+
+export async function listChartWorkspaces(scope: ChartWorkspaceScope) {
+    const response = await authFetch(
+        getBackendApiUrl(`/api/chart-workspaces?scope=${scope}`),
+    );
+
+    return readJsonResponse<ChartWorkspaceResponse[]>(
+        response,
+        "Failed to list chart workspaces",
+    );
+}
+
+export async function loadChartWorkspace(
+    scope: ChartWorkspaceScope,
+    workspaceId: number | null = null,
+) {
+    const response = await authFetch(workspaceUrl(workspaceId, scope));
+
+    if (response.status === 404 || response.status === 500) {
+        return null;
+    }
+
+    return readJsonResponse<ChartWorkspaceResponse>(
+        response,
+        "Failed to load chart workspace",
+    );
+}
+
+export async function createChartWorkspace(
+    scope: ChartWorkspaceScope,
+    request: ChartWorkspaceSaveRequest,
+) {
+    const response = await authFetch(
+        getBackendApiUrl(`/api/chart-workspaces?scope=${scope}`),
+        {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify(request),
+        },
+    );
+
+    return readJsonResponse<ChartWorkspaceResponse>(
+        response,
+        "Failed to create chart workspace",
+    );
+}
+
+export async function saveChartWorkspace(
+    scope: ChartWorkspaceScope,
+    request: ChartWorkspaceSaveRequest,
+    workspaceId: number | null = null,
+) {
+    const response = await authFetch(workspaceUrl(workspaceId, scope), {
+        method: "PUT",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(request),
+    });
+
+    return readJsonResponse<ChartWorkspaceResponse>(
+        response,
+        "Failed to save chart workspace",
+    );
+}
+
+export async function deleteChartWorkspace(workspaceId: number) {
+    const response = await authFetch(
+        getBackendApiUrl(`/api/chart-workspaces/id/${workspaceId}`),
+        {
+            method: "DELETE",
+        },
+    );
+
+    if (!response.ok) {
+        throw new Error(`Failed to delete chart workspace: ${response.status}`);
+    }
+}
@@ -13,6 +13,8 @@ import type {
    WorkspaceChartInterval,
 } from "../../../components/charts/WorkspaceChart";
 import type { ChartVariable } from "../../telemetry/types/telemetryCatalog";
+import { ModeButton } from "./ChartWorkspaceControls";
+import { getVariableColor } from "../domain/chartWorkspaceModel";

 export type ChartConfigModalChart = {
    id: string;
@@ -369,48 +371,4 @@ function EmptyVariableList({ theme }: { theme: "dark" | "light" }) {
    );
 }

-function ModeButton({
-    theme,
-    active,
-    icon,
-    label,
-    onClick,
-}: {
-    theme: "dark" | "light";
-    active: boolean;
-    icon?: React.ReactNode;
-    label: string;
-    onClick: () => void;
-}) {
-    return (
-        <button
-            type="button"
-            onClick={onClick}
-            className={
-                active
-                    ? theme === "dark"
-                        ? `${RADIUS} flex items-center justify-center gap-2 bg-[#4FD1C5] px-3 py-2 text-xs font-black text-[#07101B]`
-                        : `${RADIUS} flex items-center justify-center gap-2 bg-[#0F766E] px-3 py-2 text-xs font-black text-white`
-                    : theme === "dark"
-                        ? `${RADIUS} flex items-center justify-center gap-2 border border-[#263247] bg-[#111A2B] px-3 py-2 text-xs font-bold text-[#A8B3C7]`
-                        : `${RADIUS} flex items-center justify-center gap-2 border border-[#D7DEE8] bg-[#F8FAFC] px-3 py-2 text-xs font-bold text-slate-600`
-            }
-        >
-            {icon}
-            {label}
-        </button>
-    );
-}

-function getVariableColor(index: number) {
-    const colors = [
-        "#4FD1C5",
-        "#3B82F6",
-        "#FACC15",
-        "#7DD3FC",
-        "#A5B4FC",
-        "#FB7185",
-    ];
-
-    return colors[index % colors.length];
-}
@@ -0,0 +1,538 @@
+import { useState, type ReactNode } from "react";
+import { BarChart3, ChevronDown, Pencil, Play, Plus, Search, Trash2, X } from "lucide-react";
+import type { ChartWorkspaceResponse } from "../api/chartWorkspaceApi";
+
+const RADIUS = "rounded-[6px]";
+
+export function LayoutButton({
+    theme,
+    active,
+    icon,
+    title,
+    onClick,
+}: {
+    theme: "dark" | "light";
+    active: boolean;
+    icon: ReactNode;
+    title: string;
+    onClick: () => void;
+}) {
+    const isDark = theme === "dark";
+
+    return (
+        <button
+            type="button"
+            title={title}
+            aria-label={title}
+            onClick={onClick}
+            className={
+                active
+                    ? isDark
+                        ? `${RADIUS} grid h-10 w-10 place-items-center bg-[#4FD1C5] text-[#07101B]`
+                        : `${RADIUS} grid h-10 w-10 place-items-center bg-[#0F766E] text-white`
+                    : isDark
+                        ? `${RADIUS} grid h-10 w-10 place-items-center border border-[#263247] bg-[#111A2B] text-[#A8B3C7] transition hover:border-[#36506D] hover:text-white`
+                        : `${RADIUS} grid h-10 w-10 place-items-center border border-[#D7DEE8] bg-[#F8FAFC] text-slate-600 transition hover:bg-white hover:text-[#0F172A]`
+            }
+        >
+            {icon}
+        </button>
+    );
+}
+
+export function ModeButton({
+    theme,
+    active,
+    icon,
+    label,
+    onClick,
+}: {
+    theme: "dark" | "light";
+    active: boolean;
+    icon?: ReactNode;
+    label: string;
+    onClick: () => void;
+}) {
+    return (
+        <button
+            type="button"
+            onClick={onClick}
+            className={
+                active
+                    ? theme === "dark"
+                        ? `${RADIUS} flex items-center justify-center gap-2 bg-[#4FD1C5] px-3 py-2 text-xs font-black text-[#07101B]`
+                        : `${RADIUS} flex items-center justify-center gap-2 bg-[#0F766E] px-3 py-2 text-xs font-black text-white`
+                    : theme === "dark"
+                        ? `${RADIUS} flex items-center justify-center gap-2 border border-[#263247] bg-[#111A2B] px-3 py-2 text-xs font-bold text-[#A8B3C7]`
+                        : `${RADIUS} flex items-center justify-center gap-2 border border-[#D7DEE8] bg-[#F8FAFC] px-3 py-2 text-xs font-bold text-slate-600`
+            }
+        >
+            {icon}
+            {label}
+        </button>
+    );
+}
+
+export function EmptyWorkspace({
+    theme,
+    canAddMoreCharts,
+    title = "Nenhum gráfico aberto",
+    description = "Abra um gráfico guardado ou crie um novo gráfico para continuar.",
+    addLabel = "Novo Gráfico",
+    savedLabel = "Abrir Guardado",
+    minHeightClass = "min-h-0 flex-1",
+    onAddChart,
+    onOpenSaved,
+}: {
+    theme: "dark" | "light";
+    canAddMoreCharts: boolean;
+    title?: string;
+    description?: string;
+    addLabel?: string;
+    savedLabel?: string;
+    minHeightClass?: string;
+    onAddChart: () => void;
+    onOpenSaved: () => void;
+}) {
+    const isDark = theme === "dark";
+
+    return (
+        <section
+            className={
+                isDark
+                    ? `${RADIUS} flex ${minHeightClass} items-center justify-center border border-dashed border-[#33445F] bg-[#0E1726]/70`
+                    : `${RADIUS} flex ${minHeightClass} items-center justify-center border border-dashed border-[#CBD5E1] bg-white`
+            }
+        >
+            <div className="max-w-[420px] text-center">
+                <div
+                    className={
+                        isDark
+                            ? "mx-auto grid h-16 w-16 place-items-center rounded-2xl border border-[#263247] bg-[#111A2B] text-[#4FD1C5]"
+                            : "mx-auto grid h-16 w-16 place-items-center rounded-2xl border border-[#D7DEE8] bg-[#F8FAFC] text-[#0F766E]"
+                    }
+                >
+                    <BarChart3 className="h-8 w-8" />
+                </div>
+
+                <h2
+                    className={
+                        isDark
+                            ? "mt-5 text-xl font-black text-white"
+                            : "mt-5 text-xl font-black text-[#0F172A]"
+                    }
+                >
+                    {title}
+                </h2>
+
+                <p
+                    className={
+                        isDark
+                            ? "mt-3 text-sm leading-6 text-[#A8B3C7]"
+                            : "mt-3 text-sm leading-6 text-slate-600"
+                    }
+                >
+                    {description}
+                </p>
+
+                <div className="mt-6 flex items-center justify-center gap-3">
+                    <button
+                        type="button"
+                        disabled={!canAddMoreCharts}
+                        onClick={onAddChart}
+                        className={
+                            canAddMoreCharts
+                                ? `inline-flex h-11 items-center gap-3 ${RADIUS} bg-[#18B8A6] px-5 text-sm font-black text-white transition hover:bg-[#21C7B5]`
+                                : `inline-flex h-11 cursor-not-allowed items-center gap-3 ${RADIUS} bg-[#18B8A6]/40 px-5 text-sm font-black text-white`
+                        }
+                    >
+                        <Plus className="h-5 w-5" />
+                        {addLabel}
+                    </button>
+
+                    <button
+                        type="button"
+                        onClick={onOpenSaved}
+                        className={
+                            isDark
+                                ? `inline-flex h-11 items-center gap-3 ${RADIUS} border border-[#263247] bg-[#111A2B] px-5 text-sm font-black text-white`
+                                : `inline-flex h-11 items-center gap-3 ${RADIUS} border border-[#D7DEE8] bg-[#F8FAFC] px-5 text-sm font-black text-[#0F172A]`
+                        }
+                    >
+                        <Search className="h-5 w-5" />
+                        {savedLabel}
+                    </button>
+                </div>
+            </div>
+        </section>
+    );
+}
+
+export function WorkspaceSelector({
+    theme,
+    workspaces,
+    activeWorkspaceId,
+    detachedWorkspaceIds,
+    loading,
+    creating,
+    canCreateWorkspace,
+    onSelectWorkspace,
+    onCreateWorkspace,
+    onRenameWorkspace,
+    onDeleteWorkspace,
+}: {
+    theme: "dark" | "light";
+    workspaces: ChartWorkspaceResponse[];
+    activeWorkspaceId: number | null;
+    detachedWorkspaceIds: Set<number>;
+    loading: boolean;
+    creating: boolean;
+    canCreateWorkspace: boolean;
+    onSelectWorkspace: (workspaceId: number) => void;
+    onCreateWorkspace: (name: string) => void;
+    onRenameWorkspace: (workspaceId: number, name: string) => void | Promise<void>;
+    onDeleteWorkspace: (workspaceId: number) => void | Promise<void>;
+}) {
+    const isDark = theme === "dark";
+    const [open, setOpen] = useState(false);
+    const [createOpen, setCreateOpen] = useState(false);
+    const [renameWorkspace, setRenameWorkspace] =
+        useState<ChartWorkspaceResponse | null>(null);
+    const [search, setSearch] = useState("");
+    const activeWorkspace =
+        workspaces.find((workspace) => workspace.id === activeWorkspaceId) ??
+        null;
+
+    const filteredWorkspaces = workspaces.filter((workspace) =>
+        workspace.name.toLowerCase().includes(search.toLowerCase()),
+    );
+
+    const createWorkspace = (name: string) => {
+        onCreateWorkspace(name);
+        setCreateOpen(false);
+        setOpen(false);
+    };
+
+    const renameSelectedWorkspace = (name: string) => {
+        if (!renameWorkspace) return;
+
+        void onRenameWorkspace(renameWorkspace.id, name);
+        setRenameWorkspace(null);
+    };
+
+    return (
+        <div className="relative">
+            <button
+                type="button"
+                disabled={loading}
+                onClick={() => setOpen((value) => !value)}
+                className={
+                    isDark
+                        ? `flex h-10 min-w-[260px] items-center justify-between gap-3 ${RADIUS} border border-[#263247] bg-[#111A2B] px-4 text-sm font-black text-white transition hover:border-[#36506D] disabled:cursor-not-allowed disabled:text-[#7F8CA3]`
+                        : `flex h-10 min-w-[260px] items-center justify-between gap-3 ${RADIUS} border border-[#D7DEE8] bg-[#F8FAFC] px-4 text-sm font-black text-[#0F172A] transition hover:bg-white disabled:cursor-not-allowed disabled:text-slate-400`
+                }
+            >
+                <span className="min-w-0 truncate">
+                    {loading
+                        ? "A carregar workspaces..."
+                        : activeWorkspace?.name ?? "Workspaces"}
+                </span>
+
+                <ChevronDown className="h-4 w-4 shrink-0" />
+            </button>
+
+            {open && (
+                <div
+                    className={
+                        isDark
+                            ? `${RADIUS} absolute left-0 top-[calc(100%+8px)] z-40 w-[460px] border border-[#263247] bg-[#0E1726] p-3 shadow-2xl`
+                            : `${RADIUS} absolute left-0 top-[calc(100%+8px)] z-40 w-[460px] border border-[#D7DEE8] bg-white p-3 shadow-2xl`
+                    }
+                >
+                    <div className="mb-3 flex items-center justify-between">
+                        <div>
+                            <h2 className="text-sm font-black">Workspaces</h2>
+                            <p className={isDark ? "mt-1 text-xs text-[#7F8CA3]" : "mt-1 text-xs text-slate-500"}>
+                                {workspaces.length}/10 workspaces neste modulo.
+                            </p>
+                        </div>
+
+                        <div className="flex items-center gap-2">
+                            <button
+                                type="button"
+                                disabled={!canCreateWorkspace || creating}
+                                onClick={() => setCreateOpen(true)}
+                                className={
+                                    canCreateWorkspace && !creating
+                                        ? `inline-flex h-9 items-center gap-2 ${RADIUS} bg-[#18B8A6] px-3 text-xs font-black text-white transition hover:bg-[#21C7B5]`
+                                        : `inline-flex h-9 cursor-not-allowed items-center gap-2 ${RADIUS} bg-[#18B8A6]/40 px-3 text-xs font-black text-white`
+                                }
+                            >
+                                <Plus className="h-4 w-4" />
+                                Novo
+                            </button>
+
+                            <button type="button" onClick={() => setOpen(false)}>
+                                <X className="h-4 w-4" />
+                            </button>
+                        </div>
+                    </div>
+
+                    <div
+                        className={
+                            isDark
+                                ? `${RADIUS} mb-3 flex h-10 items-center gap-2 border border-[#263247] bg-[#07101B] px-3 text-sm text-[#7F8CA3]`
+                                : `${RADIUS} mb-3 flex h-10 items-center gap-2 border border-[#D7DEE8] bg-[#F8FAFC] px-3 text-sm text-slate-500`
+                        }
+                    >
+                        <Search className="h-4 w-4" />
+                        <input
+                            value={search}
+                            onChange={(event) => setSearch(event.target.value)}
+                            placeholder="Pesquisar workspaces..."
+                            className="w-full bg-transparent outline-none placeholder:text-inherit"
+                        />
+                    </div>
+
+                    <div className="max-h-[300px] space-y-2 overflow-y-auto pr-1">
+                        {filteredWorkspaces.map((workspace) => {
+                            const active = workspace.id === activeWorkspaceId;
+                            const detached = detachedWorkspaceIds.has(workspace.id);
+                            const chartCount = getWorkspaceChartCount(workspace);
+
+                            return (
+                                <div
+                                    key={workspace.id}
+                                    className={
+                                        isDark
+                                            ? `${RADIUS} flex w-full items-center justify-between gap-3 border border-[#263247] bg-[#111A2B] px-3 py-3 transition hover:border-[#36506D]`
+                                            : `${RADIUS} flex w-full items-center justify-between gap-3 border border-[#D7DEE8] bg-[#F8FAFC] px-3 py-3 transition hover:bg-white`
+                                    }
+                                >
+                                    <div className="min-w-0">
+                                        <p className="truncate text-sm font-black">
+                                            {workspace.name}
+                                        </p>
+                                        <p className={isDark ? "mt-1 truncate text-xs text-[#7F8CA3]" : "mt-1 truncate text-xs text-slate-500"}>
+                                            {chartCount}/10 graficos
+                                            {detached
+                                                ? " · detached"
+                                                : workspace.defaultWorkspace
+                                                    ? " · ultimo aberto"
+                                                    : ""}
+                                        </p>
+                                    </div>
+
+                                    <div className="flex shrink-0 items-center gap-3">
+                                        {active ? (
+                                            <span className="text-xs font-black text-[#4FD1C5]">
+                                                Aberto
+                                            </span>
+                                        ) : detached ? (
+                                            <span className="text-xs font-black text-[#FACC15]">
+                                                Detached
+                                            </span>
+                                        ) : (
+                                            <button
+                                                type="button"
+                                                onClick={() => {
+                                                    onSelectWorkspace(workspace.id);
+                                                    setOpen(false);
+                                                }}
+                                                title="Abrir workspace"
+                                                className="text-[#7F8CA3] transition hover:text-[#4FD1C5]"
+                                            >
+                                                <Play className="h-4 w-4" />
+                                            </button>
+                                        )}
+
+                                        <button
+                                            type="button"
+                                            onClick={() => setRenameWorkspace(workspace)}
+                                            title="Renomear workspace"
+                                            className="text-[#7F8CA3] transition hover:text-[#4FD1C5]"
+                                        >
+                                            <Pencil className="h-4 w-4" />
+                                        </button>
+
+                                        <button
+                                            type="button"
+                                            onClick={() => void onDeleteWorkspace(workspace.id)}
+                                            title="Eliminar workspace"
+                                            className="text-[#7F8CA3] transition hover:text-red-400"
+                                        >
+                                            <Trash2 className="h-4 w-4" />
+                                        </button>
+                                    </div>
+                                </div>
+                            );
+                        })}
+
+                        {filteredWorkspaces.length === 0 && (
+                            <div className={isDark ? `${RADIUS} border border-dashed border-[#263247] px-4 py-6 text-center text-sm font-bold text-[#7F8CA3]` : `${RADIUS} border border-dashed border-[#D7DEE8] px-4 py-6 text-center text-sm font-bold text-slate-500`}>
+                                Nenhum workspace encontrado.
+                            </div>
+                        )}
+                    </div>
+                </div>
+            )}
+
+            {createOpen && (
+                <NewWorkspaceModal
+                    theme={theme}
+                    creating={creating}
+                    onClose={() => setCreateOpen(false)}
+                    onCreate={createWorkspace}
+                />
+            )}
+
+            {renameWorkspace && (
+                <WorkspaceNameModal
+                    theme={theme}
+                    title="Renomear workspace"
+                    actionLabel="Guardar"
+                    initialName={renameWorkspace.name}
+                    creating={false}
+                    onClose={() => setRenameWorkspace(null)}
+                    onSubmit={renameSelectedWorkspace}
+                />
+            )}
+        </div>
+    );
+}
+
+function getWorkspaceChartCount(workspace: ChartWorkspaceResponse) {
+    try {
+        const charts = JSON.parse(workspace.chartsJson) as unknown[];
+        return Array.isArray(charts) ? charts.length : 0;
+    } catch {
+        return 0;
+    }
+}
+
+function WorkspaceNameModal({
+    theme,
+    title,
+    actionLabel,
+    initialName = "",
+    creating,
+    onClose,
+    onSubmit,
+}: {
+    theme: "dark" | "light";
+    title: string;
+    actionLabel: string;
+    initialName?: string;
+    creating: boolean;
+    onClose: () => void;
+    onSubmit: (name: string) => void;
+}) {
+    const isDark = theme === "dark";
+    const [name, setName] = useState(initialName);
+    const canCreate = name.trim().length > 0 && !creating;
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/55 p-6">
+            <div
+                className={
+                    isDark
+                        ? `${RADIUS} w-full max-w-[420px] border border-[#263247] bg-[#0E1726] shadow-2xl`
+                        : `${RADIUS} w-full max-w-[420px] border border-[#D7DEE8] bg-white shadow-2xl`
+                }
+            >
+                <header
+                    className={
+                        isDark
+                            ? "flex items-center justify-between border-b border-[#263247] px-5 py-4"
+                            : "flex items-center justify-between border-b border-[#D7DEE8] px-5 py-4"
+                    }
+                >
+                    <h2 className="text-sm font-black">{title}</h2>
+
+                    <button type="button" onClick={onClose}>
+                        <X className="h-4 w-4" />
+                    </button>
+                </header>
+
+                <main className="p-5">
+                    <label className="mb-2 block text-sm font-black">
+                        Nome
+                    </label>
+
+                    <input
+                        autoFocus
+                        value={name}
+                        onChange={(event) => setName(event.target.value)}
+                        onKeyDown={(event) => {
+                            if (event.key === "Enter" && canCreate) {
+                                onSubmit(name);
+                            }
+                        }}
+                        placeholder="Ex: Estufa norte"
+                        className={
+                            isDark
+                                ? `${RADIUS} h-11 w-full border border-[#263247] bg-[#07101B] px-3 text-sm font-bold text-white outline-none focus:border-[#4FD1C5]`
+                                : `${RADIUS} h-11 w-full border border-[#D7DEE8] bg-[#F8FAFC] px-3 text-sm font-bold text-[#0F172A] outline-none focus:border-[#0F766E]`
+                        }
+                    />
+                </main>
+
+                <footer
+                    className={
+                        isDark
+                            ? "flex justify-end gap-3 border-t border-[#263247] px-5 py-4"
+                            : "flex justify-end gap-3 border-t border-[#D7DEE8] px-5 py-4"
+                    }
+                >
+                    <button
+                        type="button"
+                        onClick={onClose}
+                        className={
+                            isDark
+                                ? `${RADIUS} border border-[#263247] bg-[#111A2B] px-4 py-2 text-sm font-bold text-white`
+                                : `${RADIUS} border border-[#D7DEE8] bg-[#F8FAFC] px-4 py-2 text-sm font-bold text-[#0F172A]`
+                        }
+                    >
+                        Cancelar
+                    </button>
+
+                    <button
+                        type="button"
+                        disabled={!canCreate}
+                        onClick={() => onSubmit(name)}
+                        className={
+                            canCreate
+                                ? `${RADIUS} bg-[#18B8A6] px-4 py-2 text-sm font-black text-white transition hover:bg-[#21C7B5]`
+                                : `${RADIUS} cursor-not-allowed bg-[#18B8A6]/40 px-4 py-2 text-sm font-black text-white`
+                        }
+                    >
+                        {actionLabel}
+                    </button>
+                </footer>
+            </div>
+        </div>
+    );
+}
+
+function NewWorkspaceModal({
+    theme,
+    creating,
+    onClose,
+    onCreate,
+}: {
+    theme: "dark" | "light";
+    creating: boolean;
+    onClose: () => void;
+    onCreate: (name: string) => void;
+}) {
+    return (
+        <WorkspaceNameModal
+            theme={theme}
+            title="Novo workspace"
+            actionLabel="Criar"
+            creating={creating}
+            onClose={onClose}
+            onSubmit={onCreate}
+        />
+    );
+}
@@ -0,0 +1,40 @@
+import type { ChartLayoutMode } from "../hooks/useChartWorkspacePersistence";
+
+export const MAX_CHARTS = 10;
+export const MAX_VARIABLES_PER_CHART = 6;
+
+export const CHART_VARIABLE_COLORS = [
+    "#4FD1C5",
+    "#3B82F6",
+    "#FACC15",
+    "#7DD3FC",
+    "#A5B4FC",
+    "#FB7185",
+];
+
+export function getVisibleSlotCount(layoutMode: ChartLayoutMode) {
+    if (layoutMode === "single") return 1;
+    if (layoutMode === "twoColumns") return 2;
+    if (layoutMode === "twoRows") return 2;
+    return 4;
+}
+
+export function layoutGridClass(layoutMode: ChartLayoutMode) {
+    if (layoutMode === "fourGrid") {
+        return "grid min-h-0 flex-1 grid-cols-2 grid-rows-2 gap-3 overflow-hidden";
+    }
+
+    if (layoutMode === "twoColumns") {
+        return "grid min-h-0 flex-1 grid-cols-2 gap-3 overflow-hidden";
+    }
+
+    if (layoutMode === "twoRows") {
+        return "grid min-h-0 flex-1 grid-rows-2 gap-3 overflow-hidden";
+    }
+
+    return "grid min-h-0 flex-1 gap-3 overflow-hidden";
+}
+
+export function getVariableColor(index: number) {
+    return CHART_VARIABLE_COLORS[index % CHART_VARIABLE_COLORS.length];
+}
@@ -4,9 +4,11 @@ import type {
    WorkspaceChartMode,
    WorkspaceChartTimeRange,
 } from "../../../components/charts/WorkspaceChart";
-import { authFetch } from "../../../lib/api/authFetch";
-import { getBackendApiUrl } from "../../../lib/api/gatewayConfig";
-import { readJsonResponse } from "../../../lib/api/readJsonResponse";
+import {
+    loadChartWorkspace,
+    saveChartWorkspace,
+} from "../api/chartWorkspaceApi";
+import type { ChartWorkspaceScope } from "../types";
 const SAVE_DEBOUNCE_MS = 800;

 export type ChartLayoutMode =
@@ -25,75 +27,67 @@ export type PersistedChartWorkspaceItem = {
    interval: WorkspaceChartInterval;
 };

-type ChartWorkspaceScope =
-    | "GLOBAL"
-    | "CLIMATE"
-    | "IRRIGATION"
-    | "METEO"
-    | "LIGHTING"
-    | "HYDRO"
-    | "AEROPONICS";
-
-type ChartWorkspaceResponse = {
-    id: number;
-    scope: ChartWorkspaceScope;
-    layoutMode: ChartLayoutMode;
-    chartsJson: string;
-    createdAt: string;
-    updatedAt: string;
-};
-
 type UseChartWorkspacePersistenceParams = {
    scope: ChartWorkspaceScope;
+    workspaceId?: number | null;
    layoutMode: ChartLayoutMode;
    charts: PersistedChartWorkspaceItem[];
    onLoaded: (workspace: {
+        id: number;
+        name: string;
+        defaultWorkspace: boolean;
        layoutMode: ChartLayoutMode;
        charts: PersistedChartWorkspaceItem[];
    }) => void;
+    saveEnabled?: boolean;
 };

 export function useChartWorkspacePersistence({
    scope,
+    workspaceId = null,
    layoutMode,
    charts,
    onLoaded,
+    saveEnabled = true,
 }: UseChartWorkspacePersistenceParams) {
    const [loaded, setLoaded] = useState(false);
    const [saving, setSaving] = useState(false);
    const [error, setError] = useState<string | null>(null);

    const saveTimeoutRef = useRef<number | null>(null);
+    const loadedWorkspaceKeyRef = useRef<string | null>(null);
+
+    const workspaceKey =
+        workspaceId === null ? `scope:${scope}` : `id:${workspaceId}`;

    useEffect(() => {
        let cancelled = false;

        async function loadWorkspace() {
-            try {
-                const response = await authFetch(
-                    getBackendApiUrl(`/api/chart-workspaces/${scope}`),
-                );
+            setLoaded(false);
+            setSaving(false);
+            setError(null);
+            loadedWorkspaceKeyRef.current = null;

-                if (response.status === 404 || response.status === 500) {
+            try {
+                const payload =
+                    await loadChartWorkspace(scope, workspaceId);
+
+                if (!payload) {
                    return;
                }

-                if (!response.ok) {
-                    throw new Error(`Failed to load workspace: ${response.status}`);
-                }
-
-                const payload = await readJsonResponse<ChartWorkspaceResponse>(
-                    response,
-                    "Failed to load chart workspace",
-                );
-
                if (cancelled) return;

                onLoaded({
+                    id: payload.id,
+                    name: payload.name,
+                    defaultWorkspace: payload.defaultWorkspace,
                    layoutMode: payload.layoutMode,
                    charts: JSON.parse(payload.chartsJson) as PersistedChartWorkspaceItem[],
                });

+                loadedWorkspaceKeyRef.current = workspaceKey;
                setError(null);
            } catch (error) {
                if (!cancelled) {
@@ -112,10 +106,11 @@ export function useChartWorkspacePersistence({
        return () => {
            cancelled = true;
        };
-    }, [scope]);
+    }, [scope, workspaceId]);

    useEffect(() => {
-        if (!loaded) return;
+        if (!loaded || !saveEnabled) return;
+        if (loadedWorkspaceKeyRef.current !== workspaceKey) return;

        if (saveTimeoutRef.current !== null) {
            window.clearTimeout(saveTimeoutRef.current);
@@ -126,24 +121,15 @@ export function useChartWorkspacePersistence({
                try {
                    setSaving(true);

-                    const response = await authFetch(
-                        getBackendApiUrl(`/api/chart-workspaces/${scope}`),
+                    await saveChartWorkspace(
+                        scope,
                        {
-                            method: "PUT",
-                            headers: {
-                                "Content-Type": "application/json",
-                            },
-                            body: JSON.stringify({
                            layoutMode,
                            chartsJson: JSON.stringify(charts),
-                            }),
                        },
+                        workspaceId,
                    );

-                    if (!response.ok) {
-                        throw new Error(`Failed to save workspace: ${response.status}`);
-                    }
-
                    setError(null);
                } catch (error) {
                    console.error("Failed to save chart workspace", error);
@@ -161,7 +147,7 @@ export function useChartWorkspacePersistence({
                window.clearTimeout(saveTimeoutRef.current);
            }
        };
-    }, [charts, layoutMode, loaded, scope]);
+    }, [charts, layoutMode, loaded, saveEnabled, scope, workspaceId, workspaceKey]);

    return {
        loaded,
@@ -0,0 +1,212 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+    createChartWorkspace,
+    deleteChartWorkspace,
+    listChartWorkspaces,
+    saveChartWorkspace,
+    type ChartWorkspaceResponse,
+} from "../api/chartWorkspaceApi";
+import type { ChartWorkspaceScope } from "../types";
+
+type UseChartWorkspaceSelectionParams = {
+    scope: ChartWorkspaceScope;
+    defaultName: string;
+};
+
+export function useChartWorkspaceSelection({
+    scope,
+    defaultName,
+}: UseChartWorkspaceSelectionParams) {
+    const [workspaces, setWorkspaces] = useState<ChartWorkspaceResponse[]>([]);
+    const [activeWorkspaceId, setActiveWorkspaceId] = useState<number | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [creating, setCreating] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const activeWorkspace = useMemo(
+        () =>
+            workspaces.find((workspace) => workspace.id === activeWorkspaceId) ??
+            null,
+        [activeWorkspaceId, workspaces],
+    );
+
+    const loadWorkspaces = useCallback(async () => {
+        try {
+            setLoading(true);
+
+            const loadedWorkspaces =
+                await listChartWorkspaces(scope);
+
+            setWorkspaces(loadedWorkspaces);
+            setActiveWorkspaceId((current) => {
+                if (current && loadedWorkspaces.some((item) => item.id === current)) {
+                    return current;
+                }
+
+                return (
+                    loadedWorkspaces.find((item) => item.defaultWorkspace)?.id ??
+                    loadedWorkspaces[0]?.id ??
+                    null
+                );
+            });
+            setError(null);
+        } catch (exception) {
+            console.error("Failed to load chart workspaces", exception);
+            setError("Nao foi possivel carregar os workspaces.");
+        } finally {
+            setLoading(false);
+        }
+    }, [scope]);
+
+    useEffect(() => {
+        void loadWorkspaces();
+    }, [loadWorkspaces]);
+
+    const selectWorkspace = useCallback(async (workspaceId: number) => {
+        const workspace =
+            workspaces.find((item) => item.id === workspaceId);
+
+        setActiveWorkspaceId(workspaceId);
+
+        if (!workspace) return;
+
+        try {
+            await saveChartWorkspace(
+                scope,
+                {
+                    name: workspace.name,
+                    sortOrder: workspace.sortOrder,
+                    defaultWorkspace: true,
+                    layoutMode: workspace.layoutMode,
+                    chartsJson: workspace.chartsJson,
+                },
+                workspace.id,
+            );
+
+            setWorkspaces((current) =>
+                current.map((item) => ({
+                    ...item,
+                    defaultWorkspace: item.id === workspaceId,
+                })),
+            );
+            setError(null);
+        } catch (exception) {
+            console.error("Failed to set default chart workspace", exception);
+            setError("Nao foi possivel guardar o workspace selecionado.");
+        }
+    }, [scope, workspaces]);
+
+    const createWorkspace = useCallback(async (name: string) => {
+        if (workspaces.length >= 10 || creating) return;
+
+        try {
+            setCreating(true);
+
+            const workspaceName = name.trim();
+            const createdWorkspace = await createChartWorkspace(scope, {
+                name: workspaceName || defaultName,
+                sortOrder: workspaces.length,
+                defaultWorkspace: true,
+                layoutMode: "fourGrid",
+                chartsJson: "[]",
+            });
+
+            setWorkspaces((current) => [
+                ...current.map((workspace) => ({
+                    ...workspace,
+                    defaultWorkspace: false,
+                })),
+                createdWorkspace,
+            ]);
+            setActiveWorkspaceId(createdWorkspace.id);
+            setError(null);
+        } catch (exception) {
+            console.error("Failed to create chart workspace", exception);
+            setError("Nao foi possivel criar o workspace.");
+        } finally {
+            setCreating(false);
+        }
+    }, [creating, defaultName, scope, workspaces.length]);
+
+    const deleteWorkspace = useCallback(async (workspaceId: number) => {
+        const workspace =
+            workspaces.find((item) => item.id === workspaceId);
+
+        if (!workspace) return;
+
+        try {
+            await deleteChartWorkspace(workspaceId);
+
+            const remaining =
+                workspaces.filter((item) => item.id !== workspaceId);
+            setWorkspaces(remaining);
+
+            if (activeWorkspaceId === workspaceId) {
+                const nextWorkspace =
+                    remaining.find((item) => item.defaultWorkspace) ??
+                    remaining[0] ??
+                    null;
+
+                setActiveWorkspaceId(nextWorkspace?.id ?? null);
+
+                if (nextWorkspace) {
+                    await saveChartWorkspace(
+                        scope,
+                        {
+                            name: nextWorkspace.name,
+                            sortOrder: nextWorkspace.sortOrder,
+                            defaultWorkspace: true,
+                            layoutMode: nextWorkspace.layoutMode,
+                            chartsJson: nextWorkspace.chartsJson,
+                        },
+                        nextWorkspace.id,
+                    );
+                }
+            }
+
+            setError(null);
+        } catch (exception) {
+            console.error("Failed to delete chart workspace", exception);
+            setError("Nao foi possivel eliminar o workspace.");
+        }
+    }, [activeWorkspaceId, scope, workspaces]);
+
+    const updateWorkspaceName = useCallback(
+        (workspaceId: number, name: string) => {
+            setWorkspaces((current) =>
+                current.map((workspace) =>
+                    workspace.id === workspaceId
+                        ? {
+                            ...workspace,
+                            name,
+                        }
+                        : workspace,
+                ),
+            );
+        },
+        [],
+    );
+
+    const setActiveWorkspace = useCallback(
+        (workspaceId: number | null) => {
+            setActiveWorkspaceId(workspaceId);
+        },
+        [],
+    );
+
+    return {
+        workspaces,
+        activeWorkspace,
+        activeWorkspaceId,
+        loading,
+        creating,
+        error,
+        canCreateWorkspace: workspaces.length < 10,
+        createWorkspace,
+        deleteWorkspace,
+        updateWorkspaceName,
+        setActiveWorkspace,
+        selectWorkspace,
+        reloadWorkspaces: loadWorkspaces,
+    };
+}
@@ -1,363 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from "react";
-import { emit } from "@tauri-apps/api/event";
-import { getCurrentWindow } from "@tauri-apps/api/window";
-import { X, Minus, Maximize2, PanelTop, Cog, Square } from "lucide-react";
-import { ChartConfigModal } from "../components/ChartConfigModal";
-
-import {
-    WorkspaceChart,
-    type WorkspaceChartConfig,
-    type WorkspaceChartMode,
-    type WorkspaceChartTimeRange,
-    type WorkspaceChartInterval,
-} from "../../../components/charts/WorkspaceChart";
-
-import { useTelemetryCatalog } from "../../telemetry/hooks/useTelemetryCatalog";
-import { useTelemetryChartSeries } from "../../telemetry/hooks/useTelemetryChartSeries";
-
-import {
-    useChartWorkspacePersistence,
-    type PersistedChartWorkspaceItem,
-} from "../hooks/useChartWorkspacePersistence";
-
-type ChartWorkspaceItem = PersistedChartWorkspaceItem & {
-    hidden?: boolean;
-    collapsed?: boolean;
-    detached?: boolean;
-    id: string;
-    title: string;
-    subtitle: string;
-    mode: WorkspaceChartMode;
-    selectedSensorKeys: string[];
-    hiddenSensorKeys?: string[];
-    timeRange: WorkspaceChartTimeRange;
-    interval: WorkspaceChartInterval;
-};
-
-type ChartWindowPageProps = {
-    theme: "dark" | "light";
-};
-
-export function ChartWindowPage({ theme }: ChartWindowPageProps) {
-    const isDark = theme === "dark";
-    const parts = window.location.pathname.split("/").filter(Boolean);
-    const chartId = parts[parts.length - 1] ?? "";
-
-    const params = new URLSearchParams(window.location.search);
-
-    const scope =
-        (params.get("scope") as "GLOBAL" | "CLIMATE") ?? "GLOBAL";
-
-    const channel =
-        (params.get("channel") as "maincharts" | "climatecharts") ??
-        "maincharts";
-
-    const { chartableVariables, connected } = useTelemetryCatalog();
-
-    const [charts, setCharts] = useState<ChartWorkspaceItem[]>([]);
-    const [configOpen, setConfigOpen] = useState(false);
-
-    const currentWindow = getCurrentWindow();
-    const latestChartRef = useRef<ChartWorkspaceItem | null>(null);
-
-    const titleBarClass = isDark
-        ? "flex h-10 shrink-0 items-center border-b border-white/10 bg-[#071421] text-slate-100"
-        : "flex h-10 shrink-0 items-center border-b border-slate-200 bg-white text-slate-950";
-
-    const titleButtonClass = isDark
-        ? "grid h-10 w-11 place-items-center text-slate-400 transition hover:bg-white/10 hover:text-white"
-        : "grid h-10 w-11 place-items-center text-slate-500 transition hover:bg-slate-100 hover:text-slate-950";
-
-    const closeButtonClass = isDark
-        ? "grid h-10 w-11 place-items-center text-slate-400 transition hover:bg-red-500 hover:text-white"
-        : "grid h-10 w-11 place-items-center text-slate-500 transition hover:bg-red-500 hover:text-white";
-
-    useChartWorkspacePersistence({
-        scope,
-        layoutMode: "fourGrid",
-        charts,
-        onLoaded: (workspace) => {
-            const loadedCharts = workspace.charts as ChartWorkspaceItem[];
-            setCharts(loadedCharts);
-
-            latestChartRef.current =
-                loadedCharts.find((item) => item.id === chartId) ?? null;
-        },
-    });
-
-    const chart = useMemo(
-        () => charts.find((item) => item.id === chartId) ?? null,
-        [charts, chartId],
-    );
-
-    useEffect(() => {
-        latestChartRef.current = chart;
-    }, [chart]);
-
-    const emitMainUpdate = async (patch: Partial<ChartWorkspaceItem>) => {
-        await emit(`${channel}://update-chart`, {
-            chartId,
-            patch,
-        });
-    };
-
-    const emitMainHidden = async () => {
-        await emit(`${channel}://hide-chart`, {
-            chartId,
-            chart: latestChartRef.current,
-        });
-    };
-
-    const emitMainAttached = async () => {
-        await emit(`${channel}://attach-chart`, {
-            chartId,
-            chart: latestChartRef.current,
-        });
-    };
-
-    useEffect(() => {
-        const unlistenPromise = currentWindow.onCloseRequested(async (event) => {
-            event.preventDefault();
-
-            try {
-                await emitMainHidden();
-            } finally {
-                await currentWindow.destroy();
-            }
-        });
-
-        return () => {
-            void unlistenPromise.then((unlisten) => unlisten());
-        };
-    }, [chartId]);
-
-    const applyLocalPatch = (patch: Partial<ChartWorkspaceItem>) => {
-        setCharts((current) =>
-            current.map((item) => {
-                if (item.id !== chartId) return item;
-
-                const next = {
-                    ...item,
-                    ...patch,
-                };
-
-                latestChartRef.current = next;
-
-                return next;
-            }),
-        );
-    };
-
-    const updateChart = (patch: Partial<ChartWorkspaceItem>) => {
-        applyLocalPatch(patch);
-
-        void emitMainUpdate(patch).catch((error) => {
-            console.error("Failed to sync chart update to main window", error);
-        });
-    };
-
-    const toggleVariable = (variableKey: string) => {
-        const currentChart = latestChartRef.current;
-        if (!currentChart) return;
-
-        const hiddenSensorKeys = currentChart.hiddenSensorKeys ?? [];
-        const isHidden = hiddenSensorKeys.includes(variableKey);
-
-        const nextHiddenSensorKeys = isHidden
-            ? hiddenSensorKeys.filter((key) => key !== variableKey)
-            : [...hiddenSensorKeys, variableKey];
-
-        updateChart({
-            hiddenSensorKeys: nextHiddenSensorKeys,
-        });
-    };
-
-    const { seriesByKey, loading } = useTelemetryChartSeries(
-        chart?.selectedSensorKeys ?? [],
-        chart?.timeRange ?? "24h",
-        chart?.interval ?? "5m",
-    );
-
-    const selectedVariables = useMemo(
-        () =>
-            chartableVariables.filter((variable) =>
-                chart?.selectedSensorKeys.includes(variable.key),
-            ),
-        [chart?.selectedSensorKeys, chartableVariables],
-    );
-
-    const attachAndClose = async () => {
-        try {
-            await emitMainAttached();
-        } catch (error) {
-            console.error("Failed to attach chart", error);
-        }
-
-        await currentWindow.destroy();
-    };
-
-    const closeAndHide = async () => {
-        try {
-            await emitMainHidden();
-        } catch (error) {
-            console.error("Failed to hide chart", error);
-        }
-
-        await currentWindow.destroy();
-    };
-
-    if (!chart && charts.length === 0) {
-        return null;
-    }
-
-    if (!chart) {
-        return (
-            <div
-                className={
-                    isDark
-                        ? "flex h-screen items-center justify-center bg-[#071421] text-sm font-bold text-slate-500"
-                        : "flex h-screen items-center justify-center bg-white text-sm font-bold text-slate-500"
-                }
-            >
-                Gráfico não encontrado.
-            </div>
-        );
-    }
-
-    const variablesStillResolving =
-        chart.selectedSensorKeys.length > 0 &&
-        selectedVariables.length === 0;
-
-    const chartConfig: WorkspaceChartConfig = {
-        id: chart.id,
-        title: "",
-        subtitle: "",
-        icon: Maximize2,
-        status: connected ? "online" : "offline",
-        sourceLabel: connected ? "Telemetry" : "Offline",
-        mode: chart.mode,
-        timeRange: chart.timeRange,
-        interval: chart.interval,
-        variables: chartableVariables
-            .filter((variable) =>
-                chart.selectedSensorKeys.includes(variable.key),
-            )
-            .map((variable, index) => ({
-                key: variable.key,
-                label: variable.label,
-                unit: variable.unit,
-                color: getVariableColor(index),
-                data: seriesByKey[variable.key] ?? [],
-                visible: !(chart.hiddenSensorKeys ?? []).includes(variable.key),
-            })),
-    };
-
-    return (
-        <div
-            className={
-                isDark
-                    ? "flex h-screen flex-col overflow-hidden bg-[#071421] text-slate-100"
-                    : "flex h-screen flex-col overflow-hidden bg-white text-slate-950"
-            }
-        >
-            <header className={titleBarClass}>
-                <div
-                    className="flex h-full flex-1 items-center px-3 text-xs font-black"
-                    onPointerDown={() => {
-                        void currentWindow.startDragging();
-                    }}
-                >
-                    {chart.title}
-                </div>
-
-                <div className="flex h-full items-center">
-                    <button type="button" title="Configurar" onClick={() => setConfigOpen(true)} className={titleButtonClass}>
-                        <Cog className="h-4 w-4" />
-                    </button>
-
-                    <button type="button" title="Repor no grid" onClick={attachAndClose} className={titleButtonClass}>
-                        <PanelTop className="h-4 w-4" />
-                    </button>
-
-                    <button type="button" title="Minimizar" onClick={() => currentWindow.minimize()} className={titleButtonClass}>
-                        <Minus className="h-4 w-4" />
-                    </button>
-
-                    <button type="button" title="Maximizar" onClick={() => currentWindow.toggleMaximize()} className={titleButtonClass}>
-                        <Square className="h-3.5 w-3.5" />
-                    </button>
-
-                    <button type="button" title="Fechar" onClick={closeAndHide} className={closeButtonClass}>
-                        <X className="h-4 w-4" />
-                    </button>
-                </div>
-            </header>
-
-            <main
-                className={
-                    isDark
-                        ? "min-h-0 flex-1 bg-[#071421] [&>section]:h-full [&>section]:rounded-none [&>section]:border-0 [&>section]:bg-[#071421]"
-                        : "min-h-0 flex-1 bg-white [&>section]:h-full [&>section]:rounded-none [&>section]:border-0 [&>section]:bg-white [&>section]:shadow-none"
-                }
-            >
-                <WorkspaceChart
-                    theme={theme}
-                    chart={chartConfig}
-                    detached
-                    loading={loading || variablesStillResolving}
-                    configuredVariableCount={chart.selectedSensorKeys.length}
-                    onModeChange={(mode) => updateChart({ mode })}
-                    onVariableToggle={toggleVariable}
-                    onTimeRangeChange={(timeRange) => updateChart({ timeRange })}
-                    onIntervalChange={(interval) => updateChart({ interval })}
-                />
-            </main>
-
-            {configOpen && (
-                <ChartConfigModal
-                    theme={theme}
-                    chart={chart}
-                    variables={chartableVariables}
-                    onClose={() => setConfigOpen(false)}
-                    onSave={async (updatedChart) => {
-                        setCharts((current) =>
-                            current.map((item) =>
-                                item.id === updatedChart.id
-                                    ? { ...item, ...updatedChart }
-                                    : item,
-                            ),
-                        );
-
-                        latestChartRef.current = {
-                            ...chart,
-                            ...updatedChart,
-                        };
-
-                        await emit(`${channel}://replace-chart`, {
-                            chart: updatedChart,
-                        }).catch((error) => {
-                            console.error("Failed to replace chart in main window", error);
-                        });
-
-                        setConfigOpen(false);
-                    }}
-                />
-            )}
-        </div>
-    );
-}
-
-function getVariableColor(index: number) {
-    const colors = [
-        "#4FD1C5",
-        "#3B82F6",
-        "#FACC15",
-        "#7DD3FC",
-        "#A5B4FC",
-        "#FB7185",
-    ];
-
-    return colors[index % colors.length];
-}
-
-export default ChartWindowPage;
@@ -0,0 +1,167 @@
+import { useEffect, useState } from "react";
+import { emit, listen } from "@tauri-apps/api/event";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+import { Minus, Square, X } from "lucide-react";
+import { MainChartsPage } from "../../maincharts/pages/MainChartsPage";
+import MeteoChartsPage from "../../meteo/pages/MeteoChartsPage";
+import { ClimateChartsPage } from "../../climate/pages/ClimateChartsPage";
+import type { ChartWorkspaceScope } from "../types";
+
+type WorkspaceWindowPageProps = {
+    theme: "dark" | "light";
+};
+
+function parseWorkspaceRoute() {
+    const parts = window.location.pathname.split("/").filter(Boolean);
+    const scope = (parts[1] ?? "GLOBAL") as ChartWorkspaceScope;
+    const workspaceId = Number(parts[2] ?? "");
+    const params = new URLSearchParams(window.location.search);
+    const title = params.get("title") ?? `Workspace ${scope}`;
+
+    return {
+        scope,
+        workspaceId: Number.isFinite(workspaceId) ? workspaceId : null,
+        title,
+    };
+}
+
+export function WorkspaceWindowPage({ theme }: WorkspaceWindowPageProps) {
+    const isDark = theme === "dark";
+    const currentWindow = getCurrentWindow();
+    const { scope, workspaceId, title } = parseWorkspaceRoute();
+    const [windowTitle, setWindowTitle] = useState(title);
+
+    useEffect(() => {
+        void currentWindow.setTitle(windowTitle);
+    }, [currentWindow, windowTitle]);
+
+    useEffect(() => {
+        const unlistenPromise = listen<{
+            scope: ChartWorkspaceScope;
+            workspaceId: number;
+            name: string;
+        }>("workspace-window://renamed", (event) => {
+            if (
+                event.payload.scope !== scope ||
+                event.payload.workspaceId !== workspaceId
+            ) {
+                return;
+            }
+
+            setWindowTitle(event.payload.name);
+        });
+
+        return () => {
+            void unlistenPromise.then((unlisten) => unlisten());
+        };
+    }, [scope, workspaceId]);
+
+    useEffect(() => {
+        const unlistenPromise = currentWindow.onCloseRequested(() => {
+            if (!workspaceId) return;
+
+            void emit("workspace-window://closed", {
+                scope,
+                workspaceId,
+            });
+        });
+
+        return () => {
+            void unlistenPromise.then((unlisten) => unlisten());
+        };
+    }, [currentWindow, scope, workspaceId]);
+
+    const titleBarClass = isDark
+        ? "flex h-10 shrink-0 items-center border-b border-white/10 bg-[#071421] text-slate-100"
+        : "flex h-10 shrink-0 items-center border-b border-slate-200 bg-white text-slate-950";
+
+    const titleButtonClass = isDark
+        ? "grid h-10 w-11 place-items-center text-slate-400 transition hover:bg-white/10 hover:text-white"
+        : "grid h-10 w-11 place-items-center text-slate-500 transition hover:bg-slate-100 hover:text-slate-950";
+
+    const closeButtonClass = isDark
+        ? "grid h-10 w-11 place-items-center text-slate-400 transition hover:bg-red-500 hover:text-white"
+        : "grid h-10 w-11 place-items-center text-slate-500 transition hover:bg-red-500 hover:text-white";
+
+    const workspaceContent = (() => {
+        if (scope === "METEO") {
+            return (
+                <MeteoChartsPage
+                    theme={theme}
+                    workspaceId={workspaceId}
+                    workspaceWindow
+                />
+            );
+        }
+
+        if (scope === "CLIMATE") {
+            return (
+                <ClimateChartsPage
+                    theme={theme}
+                    workspaceId={workspaceId}
+                    workspaceWindow
+                />
+            );
+        }
+
+        return (
+            <MainChartsPage
+                theme={theme}
+                workspaceId={workspaceId}
+                workspaceWindow
+            />
+        );
+    })();
+
+    return (
+        <div
+            className={
+                isDark
+                    ? "flex h-screen flex-col overflow-hidden bg-[#071421] text-slate-100"
+                    : "flex h-screen flex-col overflow-hidden bg-[#F8FAFC] text-slate-950"
+            }
+        >
+            <header data-tauri-drag-region className={titleBarClass}>
+                <div
+                    data-tauri-drag-region
+                    className="flex h-full flex-1 items-center px-3 text-xs font-black"
+                >
+                    {windowTitle}
+                </div>
+
+                <div className="flex h-full items-center">
+                    <button
+                        type="button"
+                        title="Minimizar"
+                        onClick={() => currentWindow.minimize()}
+                        className={titleButtonClass}
+                    >
+                        <Minus className="h-4 w-4" />
+                    </button>
+
+                    <button
+                        type="button"
+                        title="Maximizar"
+                        onClick={() => currentWindow.toggleMaximize()}
+                        className={titleButtonClass}
+                    >
+                        <Square className="h-3.5 w-3.5" />
+                    </button>
+
+                    <button
+                        type="button"
+                        title="Fechar"
+                        onClick={() => currentWindow.close()}
+                        className={closeButtonClass}
+                    >
+                        <X className="h-4 w-4" />
+                    </button>
+                </div>
+            </header>
+
+            <main className="min-h-0 flex-1 p-3">{workspaceContent}</main>
+        </div>
+    );
+}
+
+export default WorkspaceWindowPage;
@@ -0,0 +1,39 @@
+import type {
+    WorkspaceChartInterval,
+    WorkspaceChartMode,
+    WorkspaceChartTimeRange,
+} from "../../components/charts/WorkspaceChart";
+import type { PersistedChartWorkspaceItem } from "./hooks/useChartWorkspacePersistence";
+
+export type ChartWorkspaceScope =
+    | "GLOBAL"
+    | "CLIMATE"
+    | "IRRIGATION"
+    | "METEO"
+    | "LIGHTING"
+    | "HYDRO"
+    | "AEROPONICS";
+
+export type ChartWorkspaceChannel =
+    | "maincharts"
+    | "climatecharts"
+    | "meteocharts";
+
+export type ChartWorkspaceItem = PersistedChartWorkspaceItem & {
+    hidden?: boolean;
+    collapsed?: boolean;
+    id: string;
+    title: string;
+    subtitle: string;
+    mode: WorkspaceChartMode;
+    selectedSensorKeys: string[];
+    hiddenSensorKeys?: string[];
+    timeRange: WorkspaceChartTimeRange;
+    interval: WorkspaceChartInterval;
+    detached?: boolean;
+    windowX?: number;
+    windowY?: number;
+    windowWidth?: number;
+    windowHeight?: number;
+    windowZIndex?: number;
+};
@@ -1,54 +0,0 @@
-import { WebviewWindow } from "@tauri-apps/api/webviewWindow";
-
-export async function openChartWindow(
-    chartId: string,
-    theme: "dark" | "light",
-    title: string,
-    scope: "GLOBAL" | "CLIMATE" | "METEO" = "GLOBAL",
-    channel: "maincharts" | "climatecharts" | "meteocharts" = "maincharts",
-) {
-    const label = `${channel}-${chartId}`;
-
-    const existing = await WebviewWindow.getByLabel(label);
-
-    if (existing) {
-        await existing.show();
-        await existing.setFocus();
-        return;
-    }
-
-    const chartWindow = new WebviewWindow(label, {
-        url: `/chart-window/${chartId}?theme=${theme}&scope=${scope}&channel=${channel}`,
-
-        title,
-
-        width: 920,
-        height: 680,
-        minWidth: 720,
-        minHeight: 480,
-
-        decorations: false,
-        transparent: false,
-
-        resizable: true,
-        maximizable: true,
-        minimizable: true,
-        closable: true,
-
-        visible: true,
-        focus: true,
-        center: true,
-
-        skipTaskbar: false,
-    });
-
-    chartWindow.once("tauri://created", () => {
-        console.log(`Chart window created: ${label}`);
-    });
-
-    chartWindow.once("tauri://error", (error) => {
-        console.error(`Failed to create chart window: ${label}`, error);
-    });
-
-    return chartWindow;
-}
@@ -0,0 +1,54 @@
+import { WebviewWindow } from "@tauri-apps/api/webviewWindow";
+import type { ChartWorkspaceScope } from "../types";
+
+export async function openWorkspaceWindow(
+    workspaceId: number,
+    scope: ChartWorkspaceScope,
+    theme: "dark" | "light",
+    title: string,
+) {
+    const label = `workspace-${scope.toLowerCase()}-${workspaceId}`;
+    const encodedTitle = encodeURIComponent(title);
+    const existing = await WebviewWindow.getByLabel(label);
+
+    if (existing) {
+        await existing.setTitle(title);
+        await existing.show();
+        await existing.setFocus();
+        return existing;
+    }
+
+    const workspaceWindow = new WebviewWindow(label, {
+        url: `/workspace-window/${scope}/${workspaceId}?theme=${theme}&title=${encodedTitle}`,
+        title,
+
+        width: 1280,
+        height: 820,
+        minWidth: 960,
+        minHeight: 640,
+
+        decorations: false,
+        transparent: false,
+
+        resizable: true,
+        maximizable: true,
+        minimizable: true,
+        closable: true,
+
+        visible: true,
+        focus: true,
+        center: true,
+
+        skipTaskbar: false,
+    });
+
+    workspaceWindow.once("tauri://created", () => {
+        console.log(`Workspace window created: ${label}`);
+    });
+
+    workspaceWindow.once("tauri://error", (error) => {
+        console.error(`Failed to create workspace window: ${label}`, error);
+    });
+
+    return workspaceWindow;
+}
@@ -1,11 +1,18 @@
 import { useEffect, useMemo, useState } from "react";
-import { listen } from "@tauri-apps/api/event";
+import { emit, listen } from "@tauri-apps/api/event";
 import { ChartConfigModal } from "../../chartworkspace/components/ChartConfigModal";
-import { openChartWindow } from "../../chartworkspace/utils/openChartWindow";
+import {
+    EmptyWorkspace,
+    LayoutButton,
+    ModeButton,
+    WorkspaceSelector,
+} from "../../chartworkspace/components/ChartWorkspaceControls";
+import { openWorkspaceWindow } from "../../chartworkspace/utils/openWorkspaceWindow";
+import { useChartWorkspaceSelection } from "../../chartworkspace/hooks/useChartWorkspaceSelection";
+import { saveChartWorkspace } from "../../chartworkspace/api/chartWorkspaceApi";
 import { WebviewWindow } from "@tauri-apps/api/webviewWindow";
 import {
    Cog,
-    Copy,
    Maximize2,
    AreaChart,
    BarChart3,
@@ -27,8 +34,6 @@ import {
    WorkspaceChart,
    type WorkspaceChartConfig,
    type WorkspaceChartMode,
-    type WorkspaceChartTimeRange,
-    type WorkspaceChartInterval,
 } from "../../../components/charts/WorkspaceChart";

 import type { ChartVariable } from "../../telemetry/types/telemetryCatalog";
@@ -37,40 +42,32 @@ import { useClimateChartSeries } from "../hooks/useClimateChartSeries";

 import {
    useChartWorkspacePersistence,
-    type PersistedChartWorkspaceItem,
    type ChartLayoutMode,
 } from "../../chartworkspace/hooks/useChartWorkspacePersistence";
+import type { ChartWorkspaceItem } from "../../chartworkspace/types";
+import {
+    getVariableColor,
+    getVisibleSlotCount,
+    layoutGridClass,
+    MAX_CHARTS,
+    MAX_VARIABLES_PER_CHART,
+} from "../../chartworkspace/domain/chartWorkspaceModel";

 type ClimateChartsPageProps = {
    theme: "dark" | "light";
-};
-
-type ChartWorkspaceItem = PersistedChartWorkspaceItem & {
-    hidden?: boolean;
-    collapsed?: boolean;
-    id: string;
-    title: string;
-    subtitle: string;
-    mode: WorkspaceChartMode;
-    selectedSensorKeys: string[];
-    hiddenSensorKeys?: string[];
-    timeRange: WorkspaceChartTimeRange;
-    interval: WorkspaceChartInterval;
-    detached?: boolean;
-    windowX?: number;
-    windowY?: number;
-    windowWidth?: number;
-    windowHeight?: number;
-    windowZIndex?: number;
+    workspaceId?: number | null;
+    workspaceWindow?: boolean;
 };

 const RADIUS = "rounded-[6px]";
-const MAX_CHARTS = 10;
-const MAX_VARIABLES_PER_CHART = 6;

 const INITIAL_CHARTS: ChartWorkspaceItem[] = [];

-export function ClimateChartsPage({ theme }: ClimateChartsPageProps) {
+export function ClimateChartsPage({
+    theme,
+    workspaceId = null,
+    workspaceWindow = false,
+}: ClimateChartsPageProps) {
    const isDark = theme === "dark";

    const { chartableVariables, connected } = useClimateChartCatalog();
@@ -83,6 +80,120 @@ export function ClimateChartsPage({ theme }: ClimateChartsPageProps) {
    const [movingChartId, setMovingChartId] = useState<string | null>(null);
    const [newChartOpen, setNewChartOpen] = useState(false);
    const [placingChartId, setPlacingChartId] = useState<string | null>(null);
+    const [detachedWorkspaceIds, setDetachedWorkspaceIds] = useState<Set<number>>(() => new Set());
+
+    const workspaceSelection = useChartWorkspaceSelection({
+        scope: "CLIMATE",
+        defaultName: "Workspace Clima",
+    });
+
+    const activeWorkspaceId = workspaceId ?? workspaceSelection.activeWorkspaceId;
+    const activeWorkspace =
+        workspaceSelection.workspaces.find((workspace) => workspace.id === activeWorkspaceId) ??
+        workspaceSelection.activeWorkspace;
+    const activeWorkspaceName = activeWorkspace?.name ?? "Workspace Clima";
+
+    const workspaceWindowLabel = (workspaceId: number) =>
+        `workspace-climate-${workspaceId}`;
+
+    const renameWorkspace = async (workspaceId: number, name: string) => {
+        const workspace = workspaceSelection.workspaces.find(
+            (item) => item.id === workspaceId,
+        );
+
+        if (!workspace) return;
+
+        await saveChartWorkspace(
+            "CLIMATE",
+            {
+                name,
+                sortOrder: workspace.sortOrder,
+                defaultWorkspace: workspace.defaultWorkspace,
+                layoutMode: workspace.layoutMode,
+                chartsJson: workspace.chartsJson,
+            },
+            workspaceId,
+        );
+
+        workspaceSelection.updateWorkspaceName(workspaceId, name);
+
+        const existing = await WebviewWindow.getByLabel(
+            workspaceWindowLabel(workspaceId),
+        );
+        await existing?.setTitle(name);
+        await emit("workspace-window://renamed", {
+            scope: "CLIMATE",
+            workspaceId,
+            name,
+        });
+    };
+
+    const deleteWorkspace = async (workspaceId: number) => {
+        const existing = await WebviewWindow.getByLabel(
+            workspaceWindowLabel(workspaceId),
+        );
+        await existing?.close();
+
+        setDetachedWorkspaceIds((current) => {
+            const next = new Set(current);
+            next.delete(workspaceId);
+            return next;
+        });
+
+        await workspaceSelection.deleteWorkspace(workspaceId);
+    };
+
+    const detachWorkspace = () => {
+        if (!activeWorkspaceId) return;
+
+        setDetachedWorkspaceIds((current) => new Set(current).add(activeWorkspaceId));
+
+        const nextWorkspace = workspaceSelection.workspaces.find(
+            (workspace) =>
+                workspace.id !== activeWorkspaceId &&
+                !detachedWorkspaceIds.has(workspace.id),
+        );
+
+        if (nextWorkspace) {
+            void workspaceSelection.selectWorkspace(nextWorkspace.id);
+        } else {
+            workspaceSelection.setActiveWorkspace(null);
+        }
+
+        void openWorkspaceWindow(
+            activeWorkspaceId,
+            "CLIMATE",
+            theme,
+            activeWorkspaceName,
+        );
+    };
+
+    useEffect(() => {
+        const unlistenPromise = listen<{
+            scope: string;
+            workspaceId: number;
+        }>("workspace-window://closed", (event) => {
+            if (event.payload.scope !== "CLIMATE") return;
+
+            setDetachedWorkspaceIds((current) => {
+                const next = new Set(current);
+                next.delete(event.payload.workspaceId);
+                return next;
+            });
+        });
+
+        return () => {
+            void unlistenPromise.then((unlisten) => unlisten());
+        };
+    }, []);
+
+    useEffect(() => {
+        setCharts([]);
+        setConfigChartId(null);
+        setMovingChartId(null);
+        setPlacingChartId(null);
+        setSavedOpen(false);
+    }, [activeWorkspaceId]);

    const changeLayoutMode = (nextLayoutMode: ChartLayoutMode) => {
        const nextVisibleCount = getVisibleSlotCount(nextLayoutMode);
@@ -111,6 +222,7 @@ export function ClimateChartsPage({ theme }: ClimateChartsPageProps) {

    const workspacePersistence = useChartWorkspacePersistence({
        scope: "CLIMATE",
+        workspaceId: activeWorkspaceId,
        layoutMode,
        charts,
        onLoaded: (workspace) => {
@@ -209,31 +321,6 @@ export function ClimateChartsPage({ theme }: ClimateChartsPageProps) {
        setNewChartOpen(false);
    };

-    const duplicateChart = (chartId: string) => {
-        if (!canAddMoreCharts) return;
-
-        const chart = charts.find((item) => item.id === chartId);
-        if (!chart) return;
-
-        const copy: ChartWorkspaceItem = {
-            ...chart,
-            id: `chart-${Date.now()}`,
-            title: `${chart.title} cópia`,
-        };
-
-        setCharts((current) => {
-            const next = [...current, copy];
-
-            if (next.length >= 3) {
-                setLayoutMode("fourGrid");
-            } else if (next.length === 2) {
-                setLayoutMode("twoColumns");
-            }
-
-            return next;
-        });
-    };
-
    const setChartMode = (chartId: string, mode: WorkspaceChartMode) => {
        setCharts((current) =>
            current.map((chart) =>
@@ -278,8 +365,6 @@ export function ClimateChartsPage({ theme }: ClimateChartsPageProps) {
    };

    const closeChart = async (chartId: string) => {
-        await closeDetachedChartWindow(chartId);
-
        setCharts((current) =>
            current.map((chart) =>
                chart.id === chartId
@@ -299,8 +384,6 @@ export function ClimateChartsPage({ theme }: ClimateChartsPageProps) {
    };

    const deleteChart = async (chartId: string) => {
-        await closeDetachedChartWindow(chartId);
-
        setCharts((current) => current.filter((chart) => chart.id !== chartId));

        if (configChartId === chartId) setConfigChartId(null);
@@ -365,72 +448,6 @@ export function ClimateChartsPage({ theme }: ClimateChartsPageProps) {
        setSavedOpen(false);
    };

-    const closeDetachedChartWindow = async (chartId: string) => {
-        const label = `climatecharts-${chartId}`;
-        const existing = await WebviewWindow.getByLabel(label);
-
-        if (!existing) return;
-
-        try {
-            await existing.destroy();
-        } catch (error) {
-            console.error(`Failed to destroy detached chart window: ${label}`, error);
-        }
-    };
-
-    const detachChart = (chartId: string) => {
-        setCharts((current) =>
-            current.map((chart) =>
-                chart.id === chartId
-                    ? {
-                        ...chart,
-                        detached: true,
-                        hidden: false,
-                        collapsed: false,
-                    }
-                    : chart,
-            ),
-        );
-
-        window.setTimeout(() => {
-            const chart = charts.find((item) => item.id === chartId);
-
-            void openChartWindow(
-                chartId,
-                theme,
-                chart?.title ?? "Chart",
-                "CLIMATE",
-                "climatecharts",
-            );
-        }, 100);
-    };
-
-    const attachChart = async (chartId: string) => {
-        setCharts((current) =>
-            current.map((chart) =>
-                chart.id === chartId
-                    ? {
-                        ...chart,
-                        detached: false,
-                        hidden: false,
-                        collapsed: false,
-                    }
-                    : chart,
-            ),
-        );
-
-        await closeDetachedChartWindow(chartId);
-    };
-
-    const moveDetachedChart = (chartId: string, x: number, y: number) => {
-        setCharts((current) =>
-            current.map((chart) =>
-                chart.id === chartId
-                    ? { ...chart, windowX: x, windowY: y }
-                    : chart,
-            ),
-        );
-    };

    useEffect(() => {
        const unlistenAttachPromise = listen<{
@@ -545,6 +562,22 @@ export function ClimateChartsPage({ theme }: ClimateChartsPageProps) {
                        : `${RADIUS} relative flex flex-wrap items-center gap-3 border border-[#D7DEE8] bg-white p-2`
                }
            >
+                {!workspaceWindow && (
+                    <WorkspaceSelector
+                        theme={theme}
+                        workspaces={workspaceSelection.workspaces}
+                        activeWorkspaceId={workspaceSelection.activeWorkspaceId}
+                        detachedWorkspaceIds={detachedWorkspaceIds}
+                        loading={workspaceSelection.loading}
+                        creating={workspaceSelection.creating}
+                        canCreateWorkspace={workspaceSelection.canCreateWorkspace}
+                        onSelectWorkspace={workspaceSelection.selectWorkspace}
+                        onCreateWorkspace={(name) => void workspaceSelection.createWorkspace(name)}
+                        onRenameWorkspace={(workspaceId, name) => void renameWorkspace(workspaceId, name)}
+                        onDeleteWorkspace={(workspaceId) => void deleteWorkspace(workspaceId)}
+                    />
+                )}
+
                <div className="flex items-center gap-2">
                    <LayoutButton
                        theme={theme}
@@ -579,6 +612,26 @@ export function ClimateChartsPage({ theme }: ClimateChartsPageProps) {
                    />
                </div>

+                {!workspaceWindow && (
+                    <button
+                        type="button"
+                        title="Destacar workspace"
+                        aria-label="Destacar workspace"
+                        disabled={!activeWorkspaceId || workspaceWindow}
+                        onClick={detachWorkspace}
+                        className={
+                            activeWorkspaceId && !workspaceWindow
+                                ? isDark
+                                    ? `${RADIUS} grid h-10 w-10 place-items-center border border-[#263247] bg-[#111A2B] text-[#A8B3C7] transition hover:border-[#36506D] hover:text-white`
+                                    : `${RADIUS} grid h-10 w-10 place-items-center border border-[#D7DEE8] bg-[#F8FAFC] text-slate-600 transition hover:bg-white hover:text-[#0F172A]`
+                                : `${RADIUS} grid h-10 w-10 cursor-not-allowed place-items-center border border-[#263247] bg-[#111A2B]/50 text-[#7F8CA3]/50`
+                        }
+                    >
+                        <Maximize2 className="h-4 w-4" />
+                    </button>
+    
+                )}
+
                <div className="ml-auto flex items-center gap-4">
                    <div
                        className={
@@ -671,7 +724,6 @@ export function ClimateChartsPage({ theme }: ClimateChartsPageProps) {
                            movingChartId={movingChartId}
                            setMovingChartId={setMovingChartId}
                            swapCharts={swapCharts}
-                            duplicateChart={duplicateChart}
                            closeChart={closeChart}
                            setConfigChartId={setConfigChartId}
                            setChartMode={setChartMode}
@@ -679,9 +731,6 @@ export function ClimateChartsPage({ theme }: ClimateChartsPageProps) {
                            setCharts={setCharts}
                            placingChartId={placingChartId}
                            placeChartHere={placeChartHere}
-                            detachChart={detachChart}
-                            attachChart={attachChart}
-                            moveDetachedChart={moveDetachedChart}
                        />
                    ))}

@@ -768,7 +817,6 @@ function WorkspaceChartContainer({
    movingChartId,
    setMovingChartId,
    swapCharts,
-    duplicateChart,
    closeChart,
    setConfigChartId,
    setChartMode,
@@ -776,9 +824,6 @@ function WorkspaceChartContainer({
    setCharts,
    placingChartId,
    placeChartHere,
-    detachChart,
-    attachChart,
-    moveDetachedChart
 }: {
    theme: "dark" | "light";
    layoutMode: ChartLayoutMode;
@@ -788,7 +833,6 @@ function WorkspaceChartContainer({
    movingChartId: string | null;
    setMovingChartId: React.Dispatch<React.SetStateAction<string | null>>;
    swapCharts: (sourceId: string, targetId: string) => void;
-    duplicateChart: (chartId: string) => void;
    closeChart: (chartId: string) => void | Promise<void>;
    setConfigChartId: React.Dispatch<React.SetStateAction<string | null>>;
    setChartMode: (chartId: string, mode: WorkspaceChartMode) => void;
@@ -796,9 +840,6 @@ function WorkspaceChartContainer({
    setCharts: React.Dispatch<React.SetStateAction<ChartWorkspaceItem[]>>;
    placingChartId: string | null;
    placeChartHere: (targetChartId: string) => void;
-    detachChart: (chartId: string) => void;
-    attachChart: (chartId: string) => void | Promise<void>;
-    moveDetachedChart: (chartId: string, x: number, y: number) => void;
 }) {
    const isMoving = movingChartId === chartItem.id;

@@ -872,23 +913,6 @@ function WorkspaceChartContainer({
                    <Cog className="h-4 w-4" />
                </button>

-                <button type="button" title="Duplicar" className={floatingIconClass(theme)} onClick={() => duplicateChart(chartItem.id)}>
-                    <Copy className="h-4 w-4" />
-                </button>
-
-                <button
-                    type="button"
-                    title={chartItem.detached ? "Repor janela" : "Destacar janela"}
-                    className={floatingIconClass(theme)}
-                    onClick={() =>
-                        chartItem.detached
-                            ? attachChart(chartItem.id)
-                            : detachChart(chartItem.id)
-                    }
-                >
-                    <Maximize2 className="h-4 w-4" />
-                </button>
-
                <button
                    type="button"
                    title="Fechar"
@@ -929,8 +953,6 @@ function WorkspaceChartContainer({
                configuredVariableCount={chartItem.selectedSensorKeys.length}
                loading={loading || variablesStillResolving}
                detached={chartItem.detached}
-                onDetach={() => detachChart(chartItem.id)}
-                onAttach={() => attachChart(chartItem.id)}
                onTimeRangeChange={(range) =>
                    setCharts((current) =>
                        current.map((chart) =>
@@ -983,32 +1005,6 @@ function WorkspaceChartContainer({
                onVariableToggle={(variableKey) =>
                    toggleVariable(chartItem.id, variableKey)
                }
-                onHeaderPointerDown={
-                    chartItem.detached
-                        ? (event) => {
-                            const startX = event.clientX;
-                            const startY = event.clientY;
-                            const initialX = chartItem.windowX ?? 120;
-                            const initialY = chartItem.windowY ?? 120;
-
-                            const handlePointerMove = (moveEvent: PointerEvent) => {
-                                moveDetachedChart(
-                                    chartItem.id,
-                                    initialX + moveEvent.clientX - startX,
-                                    initialY + moveEvent.clientY - startY,
-                                );
-                            };
-
-                            const handlePointerUp = () => {
-                                window.removeEventListener("pointermove", handlePointerMove);
-                                window.removeEventListener("pointerup", handlePointerUp);
-                            };
-
-                            window.addEventListener("pointermove", handlePointerMove);
-                            window.addEventListener("pointerup", handlePointerUp);
-                        }
-                        : undefined
-                }
            />
        </div>
    );
@@ -1465,194 +1461,5 @@ function EmptyVariableList({ theme }: { theme: "dark" | "light" }) {
    );
 }

-function layoutGridClass(layoutMode: ChartLayoutMode) {
-    if (layoutMode === "fourGrid") {
-        return "grid min-h-0 flex-1 grid-cols-2 grid-rows-2 gap-3 overflow-hidden";
-    }
-
-    if (layoutMode === "twoColumns") {
-        return "grid min-h-0 flex-1 grid-cols-2 gap-3 overflow-hidden";
-    }
-
-    if (layoutMode === "twoRows") {
-        return "grid min-h-0 flex-1 grid-rows-2 gap-3 overflow-hidden";
-    }
-
-    return "grid min-h-0 flex-1 gap-3 overflow-hidden";
-}
-
-function getVisibleSlotCount(layoutMode: ChartLayoutMode) {
-    if (layoutMode === "single") return 1;
-    if (layoutMode === "twoColumns") return 2;
-    if (layoutMode === "twoRows") return 2;
-    return 4;
-}
-
-function LayoutButton({
-    theme,
-    active,
-    icon,
-    title,
-    onClick,
-}: {
-    theme: "dark" | "light";
-    active: boolean;
-    icon: React.ReactNode;
-    title: string;
-    onClick: () => void;
-}) {
-    const isDark = theme === "dark";
-
-    return (
-        <button
-            type="button"
-            title={title}
-            aria-label={title}
-            onClick={onClick}
-            className={
-                active
-                    ? isDark
-                        ? `${RADIUS} grid h-10 w-10 place-items-center bg-[#4FD1C5] text-[#07101B]`
-                        : `${RADIUS} grid h-10 w-10 place-items-center bg-[#0F766E] text-white`
-                    : isDark
-                        ? `${RADIUS} grid h-10 w-10 place-items-center border border-[#263247] bg-[#111A2B] text-[#A8B3C7] transition hover:border-[#36506D] hover:text-white`
-                        : `${RADIUS} grid h-10 w-10 place-items-center border border-[#D7DEE8] bg-[#F8FAFC] text-slate-600 transition hover:bg-white hover:text-[#0F172A]`
-            }
-        >
-            {icon}
-        </button>
-    );
-}
-
-function ModeButton({
-    theme,
-    active,
-    icon,
-    label,
-    onClick,
-}: {
-    theme: "dark" | "light";
-    active: boolean;
-    icon?: React.ReactNode;
-    label: string;
-    onClick: () => void;
-}) {
-    return (
-        <button
-            type="button"
-            onClick={onClick}
-            className={
-                active
-                    ? theme === "dark"
-                        ? `${RADIUS} flex items-center justify-center gap-2 bg-[#4FD1C5] px-3 py-2 text-xs font-black text-[#07101B]`
-                        : `${RADIUS} flex items-center justify-center gap-2 bg-[#0F766E] px-3 py-2 text-xs font-black text-white`
-                    : theme === "dark"
-                        ? `${RADIUS} flex items-center justify-center gap-2 border border-[#263247] bg-[#111A2B] px-3 py-2 text-xs font-bold text-[#A8B3C7]`
-                        : `${RADIUS} flex items-center justify-center gap-2 border border-[#D7DEE8] bg-[#F8FAFC] px-3 py-2 text-xs font-bold text-slate-600`
-            }
-        >
-            {icon}
-            {label}
-        </button>
-    );
-}
-
-function EmptyWorkspace({
-    theme,
-    canAddMoreCharts,
-    onAddChart,
-    onOpenSaved,
-}: {
-    theme: "dark" | "light";
-    canAddMoreCharts: boolean;
-    onAddChart: () => void;
-    onOpenSaved: () => void;
-}) {
-    const isDark = theme === "dark";
-
-    return (
-        <section
-            className={
-                isDark
-                    ? `${RADIUS} flex min-h-0 flex-1 items-center justify-center border border-dashed border-[#33445F] bg-[#0E1726]/70`
-                    : `${RADIUS} flex min-h-0 flex-1 items-center justify-center border border-dashed border-[#CBD5E1] bg-white`
-            }
-        >
-            <div className="max-w-[420px] text-center">
-                <div
-                    className={
-                        isDark
-                            ? "mx-auto grid h-16 w-16 place-items-center rounded-2xl border border-[#263247] bg-[#111A2B] text-[#4FD1C5]"
-                            : "mx-auto grid h-16 w-16 place-items-center rounded-2xl border border-[#D7DEE8] bg-[#F8FAFC] text-[#0F766E]"
-                    }
-                >
-                    <BarChart3 className="h-8 w-8" />
-                </div>
-
-                <h2
-                    className={
-                        isDark
-                            ? "mt-5 text-xl font-black text-white"
-                            : "mt-5 text-xl font-black text-[#0F172A]"
-                    }
-                >
-                    Nenhum gráfico aberto
-                </h2>
-
-                <p
-                    className={
-                        isDark
-                            ? "mt-3 text-sm leading-6 text-[#A8B3C7]"
-                            : "mt-3 text-sm leading-6 text-slate-600"
-                    }
-                >
-                    Abra um gráfico guardado ou crie um novo gráfico para continuar.
-                </p>
-
-                <div className="mt-6 flex items-center justify-center gap-3">
-                    <button
-                        type="button"
-                        disabled={!canAddMoreCharts}
-                        onClick={onAddChart}
-                        className={
-                            canAddMoreCharts
-                                ? `inline-flex h-11 items-center gap-3 ${RADIUS} bg-[#18B8A6] px-5 text-sm font-black text-white transition hover:bg-[#21C7B5]`
-                                : `inline-flex h-11 cursor-not-allowed items-center gap-3 ${RADIUS} bg-[#18B8A6]/40 px-5 text-sm font-black text-white`
-                        }
-                    >
-                        <Plus className="h-5 w-5" />
-                        Novo Gráfico
-                    </button>
-
-                    <button
-                        type="button"
-                        onClick={onOpenSaved}
-                        className={
-                            isDark
-                                ? `inline-flex h-11 items-center gap-3 ${RADIUS} border border-[#263247] bg-[#111A2B] px-5 text-sm font-black text-white`
-                                : `inline-flex h-11 items-center gap-3 ${RADIUS} border border-[#D7DEE8] bg-[#F8FAFC] px-5 text-sm font-black text-[#0F172A]`
-                        }
-                    >
-                        <Search className="h-5 w-5" />
-                        Abrir Guardado
-                    </button>
-                </div>
-            </div>
-        </section>
-    );
-}
-
-function getVariableColor(index: number) {
-    const colors = [
-        "#4FD1C5",
-        "#3B82F6",
-        "#FACC15",
-        "#7DD3FC",
-        "#A5B4FC",
-        "#FB7185",
-    ];
-
-    return colors[index % colors.length];
-}

 export default ClimateChartsPage;
@@ -1,7 +1,15 @@
 import { useEffect, useMemo, useState } from "react";
-import { listen } from "@tauri-apps/api/event";
+import { emit, listen } from "@tauri-apps/api/event";
 import { ChartConfigModal } from "../../chartworkspace/components/ChartConfigModal";
-import { openChartWindow } from "../../chartworkspace/utils/openChartWindow";
+import {
+    EmptyWorkspace,
+    LayoutButton,
+    ModeButton,
+    WorkspaceSelector,
+} from "../../chartworkspace/components/ChartWorkspaceControls";
+import { openWorkspaceWindow } from "../../chartworkspace/utils/openWorkspaceWindow";
+import { useChartWorkspaceSelection } from "../../chartworkspace/hooks/useChartWorkspaceSelection";
+import { saveChartWorkspace } from "../../chartworkspace/api/chartWorkspaceApi";
 import { WebviewWindow } from "@tauri-apps/api/webviewWindow";
 import {
    Cog,
@@ -27,8 +35,6 @@ import {
    WorkspaceChart,
    type WorkspaceChartConfig,
    type WorkspaceChartMode,
-    type WorkspaceChartTimeRange,
-    type WorkspaceChartInterval,
 } from "../../../components/charts/WorkspaceChart";
 import { useTelemetryCatalog } from "../../telemetry/hooks/useTelemetryCatalog";
 import type { ChartVariable } from "../../telemetry/types/telemetryCatalog";
@@ -36,40 +42,32 @@ import { useTelemetryChartSeries } from "../../telemetry/hooks/useTelemetryChart

 import {
    useChartWorkspacePersistence,
-    type PersistedChartWorkspaceItem,
    type ChartLayoutMode,
 } from "../../chartworkspace/hooks/useChartWorkspacePersistence";
+import type { ChartWorkspaceItem } from "../../chartworkspace/types";
+import {
+    getVariableColor,
+    getVisibleSlotCount,
+    layoutGridClass,
+    MAX_CHARTS,
+    MAX_VARIABLES_PER_CHART,
+} from "../../chartworkspace/domain/chartWorkspaceModel";

 type MainChartsPageProps = {
    theme: "dark" | "light";
-};
-
-type ChartWorkspaceItem = PersistedChartWorkspaceItem & {
-    hidden?: boolean;
-    collapsed?: boolean;
-    id: string;
-    title: string;
-    subtitle: string;
-    mode: WorkspaceChartMode;
-    selectedSensorKeys: string[];
-    hiddenSensorKeys?: string[];
-    timeRange: WorkspaceChartTimeRange;
-    interval: WorkspaceChartInterval;
-    detached?: boolean;
-    windowX?: number;
-    windowY?: number;
-    windowWidth?: number;
-    windowHeight?: number;
-    windowZIndex?: number;
+    workspaceId?: number | null;
+    workspaceWindow?: boolean;
 };

 const RADIUS = "rounded-[6px]";
-const MAX_CHARTS = 10;
-const MAX_VARIABLES_PER_CHART = 6;

 const INITIAL_CHARTS: ChartWorkspaceItem[] = [];

-export function MainChartsPage({ theme }: MainChartsPageProps) {
+export function MainChartsPage({
+    theme,
+    workspaceId = null,
+    workspaceWindow = false,
+}: MainChartsPageProps) {
    const isDark = theme === "dark";

    const { chartableVariables, connected } = useTelemetryCatalog();
@@ -82,6 +80,94 @@ export function MainChartsPage({ theme }: MainChartsPageProps) {
    const [movingChartId, setMovingChartId] = useState<string | null>(null);
    const [newChartOpen, setNewChartOpen] = useState(false);
    const [placingChartId, setPlacingChartId] = useState<string | null>(null);
+    const [detachedWorkspaceIds, setDetachedWorkspaceIds] = useState<Set<number>>(() => new Set());
+
+    const workspaceSelection = useChartWorkspaceSelection({
+        scope: "GLOBAL",
+        defaultName: "Workspace Geral",
+    });
+
+    const activeWorkspaceId = workspaceId ?? workspaceSelection.activeWorkspaceId;
+    const activeWorkspace =
+        workspaceSelection.workspaces.find((workspace) => workspace.id === activeWorkspaceId) ??
+        workspaceSelection.activeWorkspace;
+    const activeWorkspaceName = activeWorkspace?.name ?? "Workspace Geral";
+
+    const workspaceWindowLabel = (workspaceId: number) =>
+        `workspace-global-${workspaceId}`;
+
+    const renameWorkspace = async (workspaceId: number, name: string) => {
+        const workspace = workspaceSelection.workspaces.find(
+            (item) => item.id === workspaceId,
+        );
+
+        if (!workspace) return;
+
+        await saveChartWorkspace(
+            "GLOBAL",
+            {
+                name,
+                sortOrder: workspace.sortOrder,
+                defaultWorkspace: workspace.defaultWorkspace,
+                layoutMode: workspace.layoutMode,
+                chartsJson: workspace.chartsJson,
+            },
+            workspaceId,
+        );
+
+        workspaceSelection.updateWorkspaceName(workspaceId, name);
+
+        const existing = await WebviewWindow.getByLabel(
+            workspaceWindowLabel(workspaceId),
+        );
+        await existing?.setTitle(name);
+        await emit("workspace-window://renamed", {
+            scope: "GLOBAL",
+            workspaceId,
+            name,
+        });
+    };
+
+    const deleteWorkspace = async (workspaceId: number) => {
+        const existing = await WebviewWindow.getByLabel(
+            workspaceWindowLabel(workspaceId),
+        );
+        await existing?.close();
+
+        setDetachedWorkspaceIds((current) => {
+            const next = new Set(current);
+            next.delete(workspaceId);
+            return next;
+        });
+
+        await workspaceSelection.deleteWorkspace(workspaceId);
+    };
+
+    const detachWorkspace = () => {
+        if (!activeWorkspaceId) return;
+
+        setDetachedWorkspaceIds((current) => new Set(current).add(activeWorkspaceId));
+
+        const nextWorkspace = workspaceSelection.workspaces.find(
+            (workspace) =>
+                workspace.id !== activeWorkspaceId &&
+                !detachedWorkspaceIds.has(workspace.id),
+        );
+
+        if (nextWorkspace) {
+            void workspaceSelection.selectWorkspace(nextWorkspace.id);
+        } else {
+            workspaceSelection.setActiveWorkspace(null);
+        }
+
+        void openWorkspaceWindow(
+            activeWorkspaceId,
+            "GLOBAL",
+            theme,
+            activeWorkspaceName,
+        );
+    };
+
    const [viewportCompact, setViewportCompact] = useState(() =>
        typeof window !== "undefined"
            ? window.innerWidth <= 1280 || window.innerHeight <= 720
@@ -102,6 +188,35 @@ export function MainChartsPage({ theme }: MainChartsPageProps) {
    }, []);


+
+
+    useEffect(() => {
+        const unlistenPromise = listen<{
+            scope: string;
+            workspaceId: number;
+        }>("workspace-window://closed", (event) => {
+            if (event.payload.scope !== "GLOBAL") return;
+
+            setDetachedWorkspaceIds((current) => {
+                const next = new Set(current);
+                next.delete(event.payload.workspaceId);
+                return next;
+            });
+        });
+
+        return () => {
+            void unlistenPromise.then((unlisten) => unlisten());
+        };
+    }, []);
+
+    useEffect(() => {
+        setCharts([]);
+        setConfigChartId(null);
+        setMovingChartId(null);
+        setPlacingChartId(null);
+        setSavedOpen(false);
+    }, [activeWorkspaceId]);
+
    const changeLayoutMode = (nextLayoutMode: ChartLayoutMode) => {
        const nextVisibleCount = getVisibleSlotCount(nextLayoutMode);

@@ -129,6 +244,7 @@ export function MainChartsPage({ theme }: MainChartsPageProps) {

    const workspacePersistence = useChartWorkspacePersistence({
        scope: "GLOBAL",
+        workspaceId: activeWorkspaceId,
        layoutMode,
        charts,
        onLoaded: (workspace) => {
@@ -396,48 +512,6 @@ export function MainChartsPage({ theme }: MainChartsPageProps) {
        }
    };

-    const detachChart = (chartId: string) => {
-        setCharts((current) =>
-            current.map((chart) =>
-                chart.id === chartId
-                    ? {
-                        ...chart,
-                        detached: true,
-                        hidden: false,
-                        collapsed: false,
-                    }
-                    : chart,
-            ),
-        );
-
-        window.setTimeout(() => {
-            const chart = charts.find((item) => item.id === chartId);
-
-            void openChartWindow(
-                chartId,
-                theme,
-                chart?.title ?? "Chart",
-            );
-        }, 100);
-    };
-
-    const attachChart = async (chartId: string) => {
-        setCharts((current) =>
-            current.map((chart) =>
-                chart.id === chartId
-                    ? {
-                        ...chart,
-                        detached: false,
-                        hidden: false,
-                        collapsed: false,
-                    }
-                    : chart,
-            ),
-        );
-
-        await closeDetachedChartWindow(chartId);
-    };
-
    const moveDetachedChart = (chartId: string, x: number, y: number) => {
        setCharts((current) =>
            current.map((chart) =>
@@ -563,6 +637,22 @@ export function MainChartsPage({ theme }: MainChartsPageProps) {
                        : `${RADIUS} relative flex flex-wrap items-center gap-3 border border-[#D7DEE8] bg-white p-2`
                }
            >
+                {!workspaceWindow && (
+                    <WorkspaceSelector
+                        theme={theme}
+                        workspaces={workspaceSelection.workspaces}
+                        activeWorkspaceId={workspaceSelection.activeWorkspaceId}
+                        detachedWorkspaceIds={detachedWorkspaceIds}
+                        loading={workspaceSelection.loading}
+                        creating={workspaceSelection.creating}
+                        canCreateWorkspace={workspaceSelection.canCreateWorkspace}
+                        onSelectWorkspace={workspaceSelection.selectWorkspace}
+                        onCreateWorkspace={(name) => void workspaceSelection.createWorkspace(name)}
+                        onRenameWorkspace={(workspaceId, name) => void renameWorkspace(workspaceId, name)}
+                        onDeleteWorkspace={(workspaceId) => void deleteWorkspace(workspaceId)}
+                    />
+                )}
+
                <div className="flex items-center gap-2">
                    <LayoutButton
                        theme={theme}
@@ -597,6 +687,26 @@ export function MainChartsPage({ theme }: MainChartsPageProps) {
                    />
                </div>

+                {!workspaceWindow && (
+                    <button
+                        type="button"
+                        title="Destacar workspace"
+                        aria-label="Destacar workspace"
+                        disabled={!activeWorkspaceId || workspaceWindow}
+                        onClick={detachWorkspace}
+                        className={
+                            activeWorkspaceId && !workspaceWindow
+                                ? isDark
+                                    ? `${RADIUS} grid h-10 w-10 place-items-center border border-[#263247] bg-[#111A2B] text-[#A8B3C7] transition hover:border-[#36506D] hover:text-white`
+                                    : `${RADIUS} grid h-10 w-10 place-items-center border border-[#D7DEE8] bg-[#F8FAFC] text-slate-600 transition hover:bg-white hover:text-[#0F172A]`
+                                : `${RADIUS} grid h-10 w-10 cursor-not-allowed place-items-center border border-[#263247] bg-[#111A2B]/50 text-[#7F8CA3]/50`
+                        }
+                    >
+                        <Maximize2 className="h-4 w-4" />
+                    </button>
+    
+                )}
+
                <div className="ml-auto flex items-center gap-4">
                    <div
                        className={
@@ -671,6 +781,7 @@ export function MainChartsPage({ theme }: MainChartsPageProps) {
                <EmptyWorkspace
                    theme={theme}
                    canAddMoreCharts={canAddMoreCharts}
+                    minHeightClass="min-h-[520px]"
                    onAddChart={() => {
                        if (canAddMoreCharts) setNewChartOpen(true);
                    }}
@@ -696,8 +807,6 @@ export function MainChartsPage({ theme }: MainChartsPageProps) {
                            setCharts={setCharts}
                            placingChartId={placingChartId}
                            placeChartHere={placeChartHere}
-                            detachChart={detachChart}
-                            attachChart={attachChart}
                            moveDetachedChart={moveDetachedChart}
                            viewportCompact={viewportCompact}
                            layoutMode={layoutMode}
@@ -794,8 +903,6 @@ function WorkspaceChartContainer({
    setCharts,
    placingChartId,
    placeChartHere,
-    detachChart,
-    attachChart,
    moveDetachedChart,
    viewportCompact,
    layoutMode,
@@ -815,8 +922,6 @@ function WorkspaceChartContainer({
    setCharts: React.Dispatch<React.SetStateAction<ChartWorkspaceItem[]>>;
    placingChartId: string | null;
    placeChartHere: (targetChartId: string) => void;
-    detachChart: (chartId: string) => void;
-    attachChart: (chartId: string) => void | Promise<void>;
    moveDetachedChart: (chartId: string, x: number, y: number) => void;
    viewportCompact: boolean;
    layoutMode: ChartLayoutMode;
@@ -903,19 +1008,6 @@ function WorkspaceChartContainer({
                    <Copy className="h-4 w-4" />
                </button>

-                <button
-                    type="button"
-                    title={chartItem.detached ? "Repor janela" : "Destacar janela"}
-                    className={floatingIconClass(theme)}
-                    onClick={() =>
-                        chartItem.detached
-                            ? attachChart(chartItem.id)
-                            : detachChart(chartItem.id)
-                    }
-                >
-                    <Maximize2 className="h-4 w-4" />
-                </button>
-
                <button
                    type="button"
                    title="Fechar"
@@ -956,8 +1048,6 @@ function WorkspaceChartContainer({
                loading={loading || variablesStillResolving}
                detached={chartItem.detached}
                compact={shouldUseCompactMode}
-                onDetach={() => detachChart(chartItem.id)}
-                onAttach={() => attachChart(chartItem.id)}
                onTimeRangeChange={(range) =>
                    setCharts((current) =>
                        current.map((chart) =>
@@ -1492,193 +1582,5 @@ function EmptyVariableList({ theme }: { theme: "dark" | "light" }) {
    );
 }

-function layoutGridClass(layoutMode: ChartLayoutMode) {
-    if (layoutMode === "fourGrid") {
-        return "grid min-h-0 flex-1 grid-cols-2 grid-rows-2 gap-3 overflow-hidden";
-    }
-
-    if (layoutMode === "twoColumns") {
-        return "grid min-h-0 flex-1 grid-cols-2 gap-3 overflow-hidden";
-    }
-
-    if (layoutMode === "twoRows") {
-        return "grid min-h-0 flex-1 grid-rows-2 gap-3 overflow-hidden";
-    }
-
-    return "grid min-h-0 flex-1 gap-3 overflow-hidden";
-}
-function getVisibleSlotCount(layoutMode: ChartLayoutMode) {
-    if (layoutMode === "single") return 1;
-    if (layoutMode === "twoColumns") return 2;
-    if (layoutMode === "twoRows") return 2;
-    return 4;
-}
-
-function LayoutButton({
-    theme,
-    active,
-    icon,
-    title,
-    onClick,
-}: {
-    theme: "dark" | "light";
-    active: boolean;
-    icon: React.ReactNode;
-    title: string;
-    onClick: () => void;
-}) {
-    const isDark = theme === "dark";
-
-    return (
-        <button
-            type="button"
-            title={title}
-            aria-label={title}
-            onClick={onClick}
-            className={
-                active
-                    ? isDark
-                        ? `${RADIUS} grid h-10 w-10 place-items-center bg-[#4FD1C5] text-[#07101B]`
-                        : `${RADIUS} grid h-10 w-10 place-items-center bg-[#0F766E] text-white`
-                    : isDark
-                        ? `${RADIUS} grid h-10 w-10 place-items-center border border-[#263247] bg-[#111A2B] text-[#A8B3C7] transition hover:border-[#36506D] hover:text-white`
-                        : `${RADIUS} grid h-10 w-10 place-items-center border border-[#D7DEE8] bg-[#F8FAFC] text-slate-600 transition hover:bg-white hover:text-[#0F172A]`
-            }
-        >
-            {icon}
-        </button>
-    );
-}
-
-function ModeButton({
-    theme,
-    active,
-    icon,
-    label,
-    onClick,
-}: {
-    theme: "dark" | "light";
-    active: boolean;
-    icon?: React.ReactNode;
-    label: string;
-    onClick: () => void;
-}) {
-    return (
-        <button
-            type="button"
-            onClick={onClick}
-            className={
-                active
-                    ? theme === "dark"
-                        ? `${RADIUS} flex items-center justify-center gap-2 bg-[#4FD1C5] px-3 py-2 text-xs font-black text-[#07101B]`
-                        : `${RADIUS} flex items-center justify-center gap-2 bg-[#0F766E] px-3 py-2 text-xs font-black text-white`
-                    : theme === "dark"
-                        ? `${RADIUS} flex items-center justify-center gap-2 border border-[#263247] bg-[#111A2B] px-3 py-2 text-xs font-bold text-[#A8B3C7]`
-                        : `${RADIUS} flex items-center justify-center gap-2 border border-[#D7DEE8] bg-[#F8FAFC] px-3 py-2 text-xs font-bold text-slate-600`
-            }
-        >
-            {icon}
-            {label}
-        </button>
-    );
-}
-
-function EmptyWorkspace({
-    theme,
-    canAddMoreCharts,
-    onAddChart,
-    onOpenSaved,
-}: {
-    theme: "dark" | "light";
-    canAddMoreCharts: boolean;
-    onAddChart: () => void;
-    onOpenSaved: () => void;
-}) {
-    const isDark = theme === "dark";
-
-    return (
-        <section
-            className={
-                isDark
-                    ? `${RADIUS} flex min-h-[520px] items-center justify-center border border-dashed border-[#33445F] bg-[#0E1726]/70`
-                    : `${RADIUS} flex min-h-[520px] items-center justify-center border border-dashed border-[#CBD5E1] bg-white`
-            }
-        >
-            <div className="max-w-[420px] text-center">
-                <div
-                    className={
-                        isDark
-                            ? "mx-auto grid h-16 w-16 place-items-center rounded-2xl border border-[#263247] bg-[#111A2B] text-[#4FD1C5]"
-                            : "mx-auto grid h-16 w-16 place-items-center rounded-2xl border border-[#D7DEE8] bg-[#F8FAFC] text-[#0F766E]"
-                    }
-                >
-                    <BarChart3 className="h-8 w-8" />
-                </div>
-
-                <h2
-                    className={
-                        isDark
-                            ? "mt-5 text-xl font-black text-white"
-                            : "mt-5 text-xl font-black text-[#0F172A]"
-                    }
-                >
-                    Nenhum gráfico aberto
-                </h2>
-
-                <p
-                    className={
-                        isDark
-                            ? "mt-3 text-sm leading-6 text-[#A8B3C7]"
-                            : "mt-3 text-sm leading-6 text-slate-600"
-                    }
-                >
-                    Abra um gráfico guardado ou crie um novo gráfico para continuar.
-                </p>
-
-                <div className="mt-6 flex items-center justify-center gap-3">
-                    <button
-                        type="button"
-                        disabled={!canAddMoreCharts}
-                        onClick={onAddChart}
-                        className={
-                            canAddMoreCharts
-                                ? `inline-flex h-11 items-center gap-3 ${RADIUS} bg-[#18B8A6] px-5 text-sm font-black text-white transition hover:bg-[#21C7B5]`
-                                : `inline-flex h-11 cursor-not-allowed items-center gap-3 ${RADIUS} bg-[#18B8A6]/40 px-5 text-sm font-black text-white`
-                        }
-                    >
-                        <Plus className="h-5 w-5" />
-                        Novo Gráfico
-                    </button>
-
-                    <button
-                        type="button"
-                        onClick={onOpenSaved}
-                        className={
-                            isDark
-                                ? `inline-flex h-11 items-center gap-3 ${RADIUS} border border-[#263247] bg-[#111A2B] px-5 text-sm font-black text-white`
-                                : `inline-flex h-11 items-center gap-3 ${RADIUS} border border-[#D7DEE8] bg-[#F8FAFC] px-5 text-sm font-black text-[#0F172A]`
-                        }
-                    >
-                        <Search className="h-5 w-5" />
-                        Abrir Guardado
-                    </button>
-                </div>
-            </div>
-        </section>
-    );
-}
-
-function getVariableColor(index: number) {
-    const colors = [
-        "#4FD1C5",
-        "#3B82F6",
-        "#FACC15",
-        "#7DD3FC",
-        "#A5B4FC",
-        "#FB7185",
-    ];
-
-    return colors[index % colors.length];
-}

 export default MainChartsPage;
@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
-import { listen } from "@tauri-apps/api/event";
+import { emit, listen } from "@tauri-apps/api/event";
 import { WebviewWindow } from "@tauri-apps/api/webviewWindow";
 import {
    AreaChart,
@@ -25,12 +25,19 @@ import { getBackendApiUrl } from "../../../lib/api/gatewayConfig";
 import { readOptionalJsonResponse } from "../../../lib/api/readJsonResponse";

 import { ChartConfigModal } from "../../chartworkspace/components/ChartConfigModal";
-import { openChartWindow } from "../../chartworkspace/utils/openChartWindow";
+import {
+    EmptyWorkspace,
+    LayoutButton,
+    ModeButton,
+    WorkspaceSelector,
+} from "../../chartworkspace/components/ChartWorkspaceControls";
+import { openWorkspaceWindow } from "../../chartworkspace/utils/openWorkspaceWindow";
+import { useChartWorkspaceSelection } from "../../chartworkspace/hooks/useChartWorkspaceSelection";
+import { saveChartWorkspace } from "../../chartworkspace/api/chartWorkspaceApi";

 import {
    WorkspaceChart,
    type WorkspaceChartConfig,
-    type WorkspaceChartInterval,
    type WorkspaceChartMode,
    type WorkspaceChartTimeRange,
 } from "../../../components/charts/WorkspaceChart";
@@ -41,11 +48,20 @@ import { useMeteoChartCatalog } from "../hooks/useMeteoChartCatalog";
 import {
    useChartWorkspacePersistence,
    type ChartLayoutMode,
-    type PersistedChartWorkspaceItem,
 } from "../../chartworkspace/hooks/useChartWorkspacePersistence";
+import type { ChartWorkspaceItem } from "../../chartworkspace/types";
+import {
+    getVariableColor,
+    getVisibleSlotCount,
+    layoutGridClass,
+    MAX_CHARTS,
+    MAX_VARIABLES_PER_CHART,
+} from "../../chartworkspace/domain/chartWorkspaceModel";

 type MeteoChartsPageProps = {
    theme: "dark" | "light";
+    workspaceId?: number | null;
+    workspaceWindow?: boolean;
 };

 type HistorianPoint = {
@@ -56,33 +72,14 @@ type HistorianPoint = {
    total?: number | string;
 };

-type ChartWorkspaceItem = PersistedChartWorkspaceItem & {
-    hidden?: boolean;
-    collapsed?: boolean;
-    id: string;
-    title: string;
-    subtitle: string;
-    mode: WorkspaceChartMode;
-    selectedSensorKeys: string[];
-    hiddenSensorKeys?: string[];
-    timeRange: WorkspaceChartTimeRange;
-    interval: WorkspaceChartInterval;
-    detached?: boolean;
-    windowX?: number;
-    windowY?: number;
-    windowWidth?: number;
-    windowHeight?: number;
-    windowZIndex?: number;
-};
-
 const RADIUS = "rounded-[6px]";
-const MAX_CHARTS = 10;
-const MAX_VARIABLES_PER_CHART = 6;

 const INITIAL_CHARTS: ChartWorkspaceItem[] = [];

 export function MeteoChartsPage({
    theme,
+    workspaceId = null,
+    workspaceWindow = false,
 }: MeteoChartsPageProps) {

    const isDark = theme === "dark";
@@ -100,6 +97,123 @@ export function MeteoChartsPage({
    const [movingChartId, setMovingChartId] = useState<string | null>(null);
    const [newChartOpen, setNewChartOpen] = useState(false);
    const [placingChartId, setPlacingChartId] = useState<string | null>(null);
+    const [detachedWorkspaceIds, setDetachedWorkspaceIds] = useState<Set<number>>(() => new Set());
+
+    const workspaceSelection = useChartWorkspaceSelection({
+        scope: "METEO",
+        defaultName: "Workspace Meteo",
+    });
+
+    const activeWorkspaceId = workspaceId ?? workspaceSelection.activeWorkspaceId;
+    const activeWorkspace =
+        workspaceSelection.workspaces.find((workspace) => workspace.id === activeWorkspaceId) ??
+        workspaceSelection.activeWorkspace;
+    const activeWorkspaceName = activeWorkspace?.name ?? "Workspace Meteo";
+
+    const workspaceWindowLabel = (workspaceId: number) =>
+        `workspace-meteo-${workspaceId}`;
+
+    const renameWorkspace = async (workspaceId: number, name: string) => {
+        const workspace = workspaceSelection.workspaces.find(
+            (item) => item.id === workspaceId,
+        );
+
+        if (!workspace) return;
+
+        await saveChartWorkspace(
+            "METEO",
+            {
+                name,
+                sortOrder: workspace.sortOrder,
+                defaultWorkspace: workspace.defaultWorkspace,
+                layoutMode: workspace.layoutMode,
+                chartsJson: workspace.chartsJson,
+            },
+            workspaceId,
+        );
+
+        workspaceSelection.updateWorkspaceName(workspaceId, name);
+
+        const existing = await WebviewWindow.getByLabel(
+            workspaceWindowLabel(workspaceId),
+        );
+        await existing?.setTitle(name);
+        await emit("workspace-window://renamed", {
+            scope: "METEO",
+            workspaceId,
+            name,
+        });
+    };
+
+    const deleteWorkspace = async (workspaceId: number) => {
+        const existing = await WebviewWindow.getByLabel(
+            workspaceWindowLabel(workspaceId),
+        );
+        await existing?.close();
+
+        setDetachedWorkspaceIds((current) => {
+            const next = new Set(current);
+            next.delete(workspaceId);
+            return next;
+        });
+
+        await workspaceSelection.deleteWorkspace(workspaceId);
+    };
+
+    const detachWorkspace = () => {
+        if (!activeWorkspaceId) return;
+
+        setDetachedWorkspaceIds((current) => new Set(current).add(activeWorkspaceId));
+
+        const nextWorkspace = workspaceSelection.workspaces.find(
+            (workspace) =>
+                workspace.id !== activeWorkspaceId &&
+                !detachedWorkspaceIds.has(workspace.id),
+        );
+
+        if (nextWorkspace) {
+            void workspaceSelection.selectWorkspace(nextWorkspace.id);
+        } else {
+            workspaceSelection.setActiveWorkspace(null);
+        }
+
+        void openWorkspaceWindow(
+            activeWorkspaceId,
+            "METEO",
+            theme,
+            activeWorkspaceName,
+        );
+    };
+
+
+
+
+    useEffect(() => {
+        const unlistenPromise = listen<{
+            scope: string;
+            workspaceId: number;
+        }>("workspace-window://closed", (event) => {
+            if (event.payload.scope !== "METEO") return;
+
+            setDetachedWorkspaceIds((current) => {
+                const next = new Set(current);
+                next.delete(event.payload.workspaceId);
+                return next;
+            });
+        });
+
+        return () => {
+            void unlistenPromise.then((unlisten) => unlisten());
+        };
+    }, []);
+
+    useEffect(() => {
+        setCharts([]);
+        setConfigChartId(null);
+        setMovingChartId(null);
+        setPlacingChartId(null);
+        setSavedOpen(false);
+    }, [activeWorkspaceId]);

    const changeLayoutMode = (nextLayoutMode: ChartLayoutMode) => {
        const nextVisibleCount = getVisibleSlotCount(nextLayoutMode);
@@ -126,6 +240,7 @@ export function MeteoChartsPage({

    const workspacePersistence = useChartWorkspacePersistence({
        scope: "METEO",
+        workspaceId: activeWorkspaceId,
        layoutMode,
        charts,
        onLoaded: (workspace) => {
@@ -386,50 +501,6 @@ export function MeteoChartsPage({
        setSavedOpen(false);
    };

-    const detachChart = (chartId: string) => {
-        setCharts((current) =>
-            current.map((chart) =>
-                chart.id === chartId
-                    ? {
-                        ...chart,
-                        detached: true,
-                        hidden: false,
-                        collapsed: false,
-                    }
-                    : chart,
-            ),
-        );
-
-        window.setTimeout(() => {
-            const chart = charts.find((item) => item.id === chartId);
-
-            openChartWindow(
-                chartId,
-                theme,
-                chart?.title ?? "Meteo Chart",
-                "METEO",
-                "meteocharts",
-            );
-        }, 100);
-    };
-
-    const attachChart = async (chartId: string) => {
-        setCharts((current) =>
-            current.map((chart) =>
-                chart.id === chartId
-                    ? {
-                        ...chart,
-                        detached: false,
-                        hidden: false,
-                        collapsed: false,
-                    }
-                    : chart,
-            ),
-        );
-
-        await closeDetachedChartWindow(chartId);
-    };
-
    const moveDetachedChart = (chartId: string, x: number, y: number) => {
        setCharts((current) =>
            current.map((chart) =>
@@ -549,6 +620,22 @@ export function MeteoChartsPage({
                        : `${RADIUS} relative flex flex-wrap items-center gap-3 border border-[#D7DEE8] bg-white p-2`
                }
            >
+                {!workspaceWindow && (
+                    <WorkspaceSelector
+                        theme={theme}
+                        workspaces={workspaceSelection.workspaces}
+                        activeWorkspaceId={workspaceSelection.activeWorkspaceId}
+                        detachedWorkspaceIds={detachedWorkspaceIds}
+                        loading={workspaceSelection.loading}
+                        creating={workspaceSelection.creating}
+                        canCreateWorkspace={workspaceSelection.canCreateWorkspace}
+                        onSelectWorkspace={workspaceSelection.selectWorkspace}
+                        onCreateWorkspace={(name) => void workspaceSelection.createWorkspace(name)}
+                        onRenameWorkspace={(workspaceId, name) => void renameWorkspace(workspaceId, name)}
+                        onDeleteWorkspace={(workspaceId) => void deleteWorkspace(workspaceId)}
+                    />
+                )}
+
                <div className="flex items-center gap-2">
                    <LayoutButton
                        theme={theme}
@@ -583,6 +670,26 @@ export function MeteoChartsPage({
                    />
                </div>

+                {!workspaceWindow && (
+                    <button
+                        type="button"
+                        title="Destacar workspace"
+                        aria-label="Destacar workspace"
+                        disabled={!activeWorkspaceId || workspaceWindow}
+                        onClick={detachWorkspace}
+                        className={
+                            activeWorkspaceId && !workspaceWindow
+                                ? isDark
+                                    ? `${RADIUS} grid h-10 w-10 place-items-center border border-[#263247] bg-[#111A2B] text-[#A8B3C7] transition hover:border-[#36506D] hover:text-white`
+                                    : `${RADIUS} grid h-10 w-10 place-items-center border border-[#D7DEE8] bg-[#F8FAFC] text-slate-600 transition hover:bg-white hover:text-[#0F172A]`
+                                : `${RADIUS} grid h-10 w-10 cursor-not-allowed place-items-center border border-[#263247] bg-[#111A2B]/50 text-[#7F8CA3]/50`
+                        }
+                    >
+                        <Maximize2 className="h-4 w-4" />
+                    </button>
+    
+                )}
+
                <div className="ml-auto flex items-center gap-4">
                    <div
                        className={
@@ -657,6 +764,7 @@ export function MeteoChartsPage({
                <EmptyWorkspace
                    theme={theme}
                    canAddMoreCharts={canAddMoreCharts}
+                    description="Abra um gráfico guardado ou crie um novo gráfico meteorológico para continuar."
                    onAddChart={() => {
                        if (canAddMoreCharts) setNewChartOpen(true);
                    }}
@@ -683,8 +791,6 @@ export function MeteoChartsPage({
                            setCharts={setCharts}
                            placingChartId={placingChartId}
                            placeChartHere={placeChartHere}
-                            detachChart={detachChart}
-                            attachChart={attachChart}
                            moveDetachedChart={moveDetachedChart}
                        />
                    ))}
@@ -791,8 +897,6 @@ function WorkspaceChartContainer({
    setCharts,
    placingChartId,
    placeChartHere,
-    detachChart,
-    attachChart,
    moveDetachedChart,
 }: {
    theme: "dark" | "light";
@@ -811,8 +915,6 @@ function WorkspaceChartContainer({
    setCharts: React.Dispatch<React.SetStateAction<ChartWorkspaceItem[]>>;
    placingChartId: string | null;
    placeChartHere: (targetChartId: string) => void;
-    detachChart: (chartId: string) => void;
-    attachChart: (chartId: string) => void | Promise<void>;
    moveDetachedChart: (chartId: string, x: number, y: number) => void;
 }) {
    const isMoving = movingChartId === chartItem.id;
@@ -899,19 +1001,6 @@ function WorkspaceChartContainer({
                    <Copy className="h-4 w-4" />
                </button>

-                <button
-                    type="button"
-                    title={chartItem.detached ? "Repor janela" : "Destacar janela"}
-                    className={floatingIconClass(theme)}
-                    onClick={() =>
-                        chartItem.detached
-                            ? attachChart(chartItem.id)
-                            : detachChart(chartItem.id)
-                    }
-                >
-                    <Maximize2 className="h-4 w-4" />
-                </button>
-
                <button
                    type="button"
                    title="Fechar"
@@ -952,8 +1041,6 @@ function WorkspaceChartContainer({
                configuredVariableCount={chartItem.selectedSensorKeys.length}
                loading={loading || variablesStillResolving}
                detached={chartItem.detached}
-                onDetach={() => detachChart(chartItem.id)}
-                onAttach={() => attachChart(chartItem.id)}
                onTimeRangeChange={(range) =>
                    setCharts((current) =>
                        current.map((chart) =>
@@ -1631,195 +1718,5 @@ function EmptyVariableList({ theme }: { theme: "dark" | "light" }) {
    );
 }

-function layoutGridClass(layoutMode: ChartLayoutMode) {
-    if (layoutMode === "fourGrid") {
-        return "grid min-h-0 flex-1 grid-cols-2 grid-rows-2 gap-3 overflow-hidden";
-    }
-
-    if (layoutMode === "twoColumns") {
-        return "grid min-h-0 flex-1 grid-cols-2 gap-3 overflow-hidden";
-    }
-
-    if (layoutMode === "twoRows") {
-        return "grid min-h-0 flex-1 grid-rows-2 gap-3 overflow-hidden";
-    }
-
-    return "grid min-h-0 flex-1 gap-3 overflow-hidden";
-}
-
-function getVisibleSlotCount(layoutMode: ChartLayoutMode) {
-    if (layoutMode === "single") return 1;
-    if (layoutMode === "twoColumns") return 2;
-    if (layoutMode === "twoRows") return 2;
-    return 4;
-}
-
-function LayoutButton({
-    theme,
-    active,
-    icon,
-    title,
-    onClick,
-}: {
-    theme: "dark" | "light";
-    active: boolean;
-    icon: React.ReactNode;
-    title: string;
-    onClick: () => void;
-}) {
-    const isDark = theme === "dark";
-
-    return (
-        <button
-            type="button"
-            title={title}
-            aria-label={title}
-            onClick={onClick}
-            className={
-                active
-                    ? isDark
-                        ? `${RADIUS} grid h-10 w-10 place-items-center bg-[#4FD1C5] text-[#07101B]`
-                        : `${RADIUS} grid h-10 w-10 place-items-center bg-[#0F766E] text-white`
-                    : isDark
-                        ? `${RADIUS} grid h-10 w-10 place-items-center border border-[#263247] bg-[#111A2B] text-[#A8B3C7] transition hover:border-[#36506D] hover:text-white`
-                        : `${RADIUS} grid h-10 w-10 place-items-center border border-[#D7DEE8] bg-[#F8FAFC] text-slate-600 transition hover:bg-white hover:text-[#0F172A]`
-            }
-        >
-            {icon}
-        </button>
-    );
-}
-
-function ModeButton({
-    theme,
-    active,
-    icon,
-    label,
-    onClick,
-}: {
-    theme: "dark" | "light";
-    active: boolean;
-    icon?: React.ReactNode;
-    label: string;
-    onClick: () => void;
-}) {
-    return (
-        <button
-            type="button"
-            onClick={onClick}
-            className={
-                active
-                    ? theme === "dark"
-                        ? `${RADIUS} flex items-center justify-center gap-2 bg-[#4FD1C5] px-3 py-2 text-xs font-black text-[#07101B]`
-                        : `${RADIUS} flex items-center justify-center gap-2 bg-[#0F766E] px-3 py-2 text-xs font-black text-white`
-                    : theme === "dark"
-                        ? `${RADIUS} flex items-center justify-center gap-2 border border-[#263247] bg-[#111A2B] px-3 py-2 text-xs font-bold text-[#A8B3C7]`
-                        : `${RADIUS} flex items-center justify-center gap-2 border border-[#D7DEE8] bg-[#F8FAFC] px-3 py-2 text-xs font-bold text-slate-600`
-            }
-        >
-            {icon}
-            {label}
-        </button>
-    );
-}
-
-function EmptyWorkspace({
-    theme,
-    canAddMoreCharts,
-    onAddChart,
-    onOpenSaved,
-}: {
-    theme: "dark" | "light";
-    canAddMoreCharts: boolean;
-    onAddChart: () => void;
-    onOpenSaved: () => void;
-}) {
-    const isDark = theme === "dark";
-
-    return (
-        <section
-            className={
-                isDark
-                    ? `${RADIUS} flex min-h-0 flex-1 items-center justify-center border border-dashed border-[#33445F] bg-[#0E1726]/70`
-                    : `${RADIUS} flex min-h-0 flex-1 items-center justify-center border border-dashed border-[#CBD5E1] bg-white`
-            }
-        >
-            <div className="max-w-[420px] text-center">
-                <div
-                    className={
-                        isDark
-                            ? "mx-auto grid h-16 w-16 place-items-center rounded-2xl border border-[#263247] bg-[#111A2B] text-[#4FD1C5]"
-                            : "mx-auto grid h-16 w-16 place-items-center rounded-2xl border border-[#D7DEE8] bg-[#F8FAFC] text-[#0F766E]"
-                    }
-                >
-                    <BarChart3 className="h-8 w-8" />
-                </div>
-
-                <h2
-                    className={
-                        isDark
-                            ? "mt-5 text-xl font-black text-white"
-                            : "mt-5 text-xl font-black text-[#0F172A]"
-                    }
-                >
-                    Nenhum gráfico aberto
-                </h2>
-
-                <p
-                    className={
-                        isDark
-                            ? "mt-3 text-sm leading-6 text-[#A8B3C7]"
-                            : "mt-3 text-sm leading-6 text-slate-600"
-                    }
-                >
-                    Abra um gráfico guardado ou crie um novo gráfico meteorológico
-                    para continuar.
-                </p>
-
-                <div className="mt-6 flex items-center justify-center gap-3">
-                    <button
-                        type="button"
-                        disabled={!canAddMoreCharts}
-                        onClick={onAddChart}
-                        className={
-                            canAddMoreCharts
-                                ? `inline-flex h-11 items-center gap-3 ${RADIUS} bg-[#18B8A6] px-5 text-sm font-black text-white transition hover:bg-[#21C7B5]`
-                                : `inline-flex h-11 cursor-not-allowed items-center gap-3 ${RADIUS} bg-[#18B8A6]/40 px-5 text-sm font-black text-white`
-                        }
-                    >
-                        <Plus className="h-5 w-5" />
-                        Novo Gráfico
-                    </button>
-
-                    <button
-                        type="button"
-                        onClick={onOpenSaved}
-                        className={
-                            isDark
-                                ? `inline-flex h-11 items-center gap-3 ${RADIUS} border border-[#263247] bg-[#111A2B] px-5 text-sm font-black text-white`
-                                : `inline-flex h-11 items-center gap-3 ${RADIUS} border border-[#D7DEE8] bg-[#F8FAFC] px-5 text-sm font-black text-[#0F172A]`
-                        }
-                    >
-                        <Search className="h-5 w-5" />
-                        Abrir Guardado
-                    </button>
-                </div>
-            </div>
-        </section>
-    );
-}
-
-function getVariableColor(index: number) {
-    const colors = [
-        "#4FD1C5",
-        "#3B82F6",
-        "#FACC15",
-        "#7DD3FC",
-        "#A5B4FC",
-        "#FB7185",
-    ];
-
-    return colors[index % colors.length];
-}

 export default MeteoChartsPage;
@@ -68,6 +68,7 @@ type Accent = "amber" | "blue" | "cyan" | "emerald" | "violet";

 const HISTORY_HOURS = 6;
 const RADIUS = "rounded-[5px]";
+const OVERVIEW_PANEL_HEIGHT = "h-[488px] min-h-[488px]";

 const HISTORY_KEYS = {
    temperature: "temperature",
@@ -969,10 +970,10 @@ function WeatherSummaryPanel({
    const isDark = theme === "dark";

    return (
-        <section className={panelClass(isDark)}>
+        <section className={`${panelClass(isDark)} ${OVERVIEW_PANEL_HEIGHT}`}>
            <h2 className={panelTitleClass(isDark)}>Resumo meteorológico</h2>

-            <div className="mt-3 grid flex-1 content-start gap-2">
+            <div className="mt-3 grid content-start gap-2">
                <SummaryTile
                    theme={theme}
                    icon={Thermometer}
@@ -1065,11 +1066,11 @@ function WindDirectionPanel({
    const consistency = windConsistency(history);

    return (
-        <section className={panelClass(isDark)}>
+        <section className={`${panelClass(isDark)} ${OVERVIEW_PANEL_HEIGHT}`}>
            <h2 className={panelTitleClass(isDark)}>Direção do vento</h2>

-            <div className="mt-2 flex flex-1 items-center justify-center">
-                <div className="relative h-[250px] w-[250px]">
+            <div className="flex min-h-0 flex-1 items-center justify-center py-4">
+                <div className="relative h-[240px] w-[240px]">
                    <div className={isDark ? "absolute inset-0 rounded-full border border-white/10 bg-[#0b1220]" : "absolute inset-0 rounded-full border border-slate-200 bg-slate-50"} />
                    <div className={isDark ? "absolute inset-6 rounded-full border border-white/10" : "absolute inset-6 rounded-full border border-slate-200"} />
                    <div className={isDark ? "absolute inset-[74px] rounded-full border border-white/10 bg-white/[0.02]" : "absolute inset-[74px] rounded-full border border-slate-200 bg-white"} />
@@ -1135,7 +1136,7 @@ function WindDirectionPanel({
                </div>
            </div>

-            <div className="mt-2 grid grid-cols-3 gap-2">
+            <div className="mt-auto grid grid-cols-3 gap-2 pt-4">
                <SmallStat
                    theme={theme}
                    label="Rajada máx."
@@ -1249,7 +1250,7 @@ function RealtimeChartPanel({
    const isDark = theme === "dark";

    return (
-        <section className={`${panelClass(isDark)} relative min-h-0 p-0`}>
+        <section className={`${panelClass(isDark)} ${OVERVIEW_PANEL_HEIGHT} relative min-h-0 overflow-hidden p-0`}>
            <div className="absolute right-3 top-3 z-20">
                <button
                    type="button"
@@ -1270,6 +1271,7 @@ function RealtimeChartPanel({
                    chart={chart}
                    loading={historyLoading && !hasAnyChartData}
                    configuredVariableCount={series.length}
+                    compact
                    onModeChange={setMode}
                    onVariableToggle={handleVariableToggle}
                    onTimeRangeChange={setTimeRange}
@@ -1297,7 +1299,7 @@ function chartColor(accent: Accent) {

 function CompactMeteoChart({ children }: { children: React.ReactNode }) {
    return (
-        <div className="h-full [&>section]:h-full [&>section]:border-0 [&>section]:bg-transparent [&>section]:shadow-none [&>section>header]:px-4 [&>section>header]:py-3 [&>section>main]:px-3 [&>section>main]:pb-3 [&_main_section>div.relative]:h-[235px] [&_main_section>div.relative]:min-h-[235px]">
+        <div className="h-full min-h-0 overflow-hidden [&>section]:h-full [&>section]:min-h-0 [&>section]:overflow-hidden [&>section]:border-0 [&>section]:bg-transparent [&>section]:shadow-none [&>section>header]:px-4 [&>section>header]:py-3 [&>section>main]:min-h-0 [&>section>main]:px-3 [&>section>main]:pb-3 [&>section>main>section]:min-h-0 [&>section>main>section]:overflow-hidden">
            {children}
        </div>
    );
@@ -1480,8 +1482,8 @@ function HeroState({ children }: { children: string }) {

 function panelClass(isDark: boolean) {
    return isDark
-        ? `${RADIUS} flex h-full flex-col border border-white/10 bg-[#071421] p-3 shadow-[0_14px_34px_rgba(0,0,0,0.22)]`
-        : `${RADIUS} flex h-full flex-col border border-slate-200 bg-white p-3 shadow-[0_10px_26px_rgba(15,23,42,0.06)]`;
+        ? `${RADIUS} flex flex-col border border-white/10 bg-[#071421] p-3 shadow-[0_14px_34px_rgba(0,0,0,0.22)]`
+        : `${RADIUS} flex flex-col border border-slate-200 bg-white p-3 shadow-[0_10px_26px_rgba(15,23,42,0.06)]`;
 }

 function panelTitleClass(isDark: boolean) {