feat: add environment management features including switcher, dialog, and production guard

- Implemented EnvironmentSwitcher component for selecting environments.
- Added NewEnvironmentDialog for provisioning new environments.
- Created ProductionGuard to confirm destructive actions in production environments.
- Developed hooks for managing environment state and details.
- Established routes for environment overview and management.
- Enhanced UI components for better user experience in environment management.

Author: hotlong

apps/studio/src/components/environment-badge.tsx

@@ -0,0 +1,68 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+
+/**
+ * EnvironmentBadge — color-coded pill indicating the environment type.
+ *
+ * Color grammar follows industry convention (Salesforce/Power Platform):
+ * - `production` → red/destructive (danger zone)
+ * - `staging`   → amber (pre-prod parity)
+ * - `sandbox`   → amber/yellow (prod clone, but not live)
+ * - `development`, `test`, `preview`, `trial` → muted/secondary
+ *
+ * Keep this component purely presentational — no data fetching or
+ * navigation side-effects — so it can be rendered in tables, badges,
+ * breadcrumbs, and dialogs without pulling in context.
+ */
+
+import { cn } from '@/lib/utils';
+import type { EnvironmentType } from '@objectstack/spec/cloud';
+
+const VARIANT: Record<EnvironmentType, string> = {
+  production:
+    'border-red-500/40 bg-red-500/10 text-red-700 dark:text-red-300',
+  staging:
+    'border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-300',
+  sandbox:
+    'border-yellow-500/40 bg-yellow-500/10 text-yellow-700 dark:text-yellow-300',
+  development: 'border-sky-500/40 bg-sky-500/10 text-sky-700 dark:text-sky-300',
+  test: 'border-emerald-500/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300',
+  preview:
+    'border-violet-500/40 bg-violet-500/10 text-violet-700 dark:text-violet-300',
+  trial: 'border-muted bg-muted text-muted-foreground',
+};
+
+const SHORT: Record<EnvironmentType, string> = {
+  production: 'PROD',
+  staging: 'STG',
+  sandbox: 'SBX',
+  development: 'DEV',
+  test: 'TEST',
+  preview: 'PRE',
+  trial: 'TRIAL',
+};
+
+export interface EnvironmentBadgeProps {
+  envType: EnvironmentType;
+  /** Use the full label instead of the 3–4 char short form. */
+  full?: boolean;
+  className?: string;
+}
+
+export function EnvironmentBadge({
+  envType,
+  full,
+  className,
+}: EnvironmentBadgeProps) {
+  return (
+    <span
+      className={cn(
+        'inline-flex h-4 items-center rounded border px-1.5 text-[10px] font-mono font-semibold uppercase tracking-wider',
+        VARIANT[envType],
+        className,
+      )}
+      title={envType}
+    >
+      {full ? envType : SHORT[envType]}
+    </span>
+  );
+}

apps/studio/src/components/environment-switcher.tsx

@@ -0,0 +1,235 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+
+/**
+ * EnvironmentSwitcher
+ *
+ * Power Platform-style environment picker, anchored on the left of the
+ * site header. Lists every environment visible to the current session,
+ * grouped by `envType`, and navigates to `/environments/:id/overview`
+ * when one is selected. Also exposes a "+ New environment…" footer that
+ * opens {@link NewEnvironmentDialog}.
+ *
+ * The switcher is intentionally stateless with respect to the active
+ * environment — the URL is the source of truth, read via
+ * `useParams({ strict: false })`. Persistence across reloads is handled
+ * by `rememberActiveEnvironment()` in `useEnvironments` and is replayed
+ * by `useObjectStackClient` during initial client construction.
+ *
+ * @see docs/adr/0002-environment-database-isolation.md
+ */
+
+import { useMemo, useState } from 'react';
+import { useNavigate, useParams } from '@tanstack/react-router';
+import { ChevronsUpDown, Layers, Plus, Search, Check } from 'lucide-react';
+import type { Environment, EnvironmentType } from '@objectstack/spec/cloud';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { useEnvironments } from '@/hooks/useEnvironments';
+import { NewEnvironmentDialog } from '@/components/new-environment-dialog';
+import { EnvironmentBadge } from '@/components/environment-badge';
+
+const ENV_TYPE_ORDER: EnvironmentType[] = [
+  'production',
+  'staging',
+  'sandbox',
+  'development',
+  'test',
+  'preview',
+  'trial',
+];
+
+const ENV_TYPE_LABEL: Record<EnvironmentType, string> = {
+  production: 'Production',
+  staging: 'Staging',
+  sandbox: 'Sandbox',
+  development: 'Development',
+  test: 'Test',
+  preview: 'Preview',
+  trial: 'Trial',
+};
+
+export function EnvironmentSwitcher() {
+  const navigate = useNavigate();
+  const params = useParams({ strict: false }) as { environmentId?: string };
+  const activeId = params.environmentId;
+  const { environments, loading, reload } = useEnvironments();
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const [createOpen, setCreateOpen] = useState(false);
+
+  const active = useMemo(
+    () => environments.find((e) => e.id === activeId) ?? null,
+    [environments, activeId],
+  );
+
+  const grouped = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    const filtered = q
+      ? environments.filter(
+          (e) =>
+            e.slug.toLowerCase().includes(q) ||
+            e.displayName.toLowerCase().includes(q) ||
+            e.id.toLowerCase().includes(q),
+        )
+      : environments;
+    const map = new Map<EnvironmentType, Environment[]>();
+    for (const e of filtered) {
+      const arr = map.get(e.envType) ?? [];
+      arr.push(e);
+      map.set(e.envType, arr);
+    }
+    return ENV_TYPE_ORDER.filter((t) => map.has(t)).map(
+      (t) => [t, map.get(t)!] as const,
+    );
+  }, [environments, search]);
+
+  const handleSelect = (id: string) => {
+    setOpen(false);
+    setSearch('');
+    navigate({
+      to: '/environments/$environmentId',
+      params: { environmentId: id },
+    });
+  };
+
+  return (
+    <>
+      <DropdownMenu open={open} onOpenChange={setOpen}>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-8 gap-2 px-2 text-sm font-medium"
+          >
+            <Layers className="h-3.5 w-3.5 text-muted-foreground" />
+            {active ? (
+              <>
+                <span className="max-w-[160px] truncate">
+                  {active.displayName}
+                </span>
+                <EnvironmentBadge envType={active.envType} />
+              </>
+            ) : (
+              <span className="text-muted-foreground">
+                {loading ? 'Loading environments…' : 'Select environment'}
+              </span>
+            )}
+            <ChevronsUpDown className="h-3.5 w-3.5 opacity-60" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          align="start"
+          className="w-[340px] p-0"
+          sideOffset={4}
+        >
+          <div className="p-2 border-b">
+            <div className="relative">
+              <Search className="absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                autoFocus
+                placeholder="Search environments…"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                className="h-8 pl-7 text-sm"
+              />
+            </div>
+          </div>
+
+          <div className="max-h-[340px] overflow-y-auto py-1">
+            {environments.length === 0 && !loading && (
+              <div className="px-3 py-6 text-center text-xs text-muted-foreground">
+                No environments yet.
+              </div>
+            )}
+            {grouped.map(([envType, list]) => (
+              <div key={envType}>
+                <DropdownMenuLabel className="text-[10px] uppercase tracking-wider text-muted-foreground">
+                  {ENV_TYPE_LABEL[envType]}
+                </DropdownMenuLabel>
+                {list.map((env) => (
+                  <DropdownMenuItem
+                    key={env.id}
+                    onSelect={(e) => {
+                      e.preventDefault();
+                      handleSelect(env.id);
+                    }}
+                    className="flex items-start gap-2"
+                  >
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2">
+                        <span className="truncate font-medium">
+                          {env.displayName}
+                        </span>
+                        {env.isDefault && (
+                          <Badge
+                            variant="outline"
+                            className="h-4 px-1 text-[9px]"
+                          >
+                            default
+                          </Badge>
+                        )}
+                      </div>
+                      <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
+                        <code className="font-mono">{env.slug}</code>
+                        {env.region && <span>· {env.region}</span>}
+                        <span>· {env.status}</span>
+                      </div>
+                    </div>
+                    <EnvironmentBadge envType={env.envType} />
+                    {env.id === activeId && (
+                      <Check className="h-3.5 w-3.5 text-primary" />
+                    )}
+                  </DropdownMenuItem>
+                ))}
+              </div>
+            ))}
+          </div>
+
+          <DropdownMenuSeparator className="m-0" />
+          <DropdownMenuItem
+            onSelect={(e) => {
+              e.preventDefault();
+              setOpen(false);
+              setCreateOpen(true);
+            }}
+            className="gap-2 text-sm"
+          >
+            <Plus className="h-3.5 w-3.5" />
+            New environment…
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onSelect={(e) => {
+              e.preventDefault();
+              setOpen(false);
+              navigate({ to: '/environments' });
+            }}
+            className="gap-2 text-sm text-muted-foreground"
+          >
+            Manage all environments
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <NewEnvironmentDialog
+        open={createOpen}
+        onOpenChange={setCreateOpen}
+        onCreated={async (env) => {
+          await reload();
+          navigate({
+            to: '/environments/$environmentId',
+            params: { environmentId: env.id },
+          });
+        }}
+      />
+    </>
+  );
+}