@woosau/dsh-custom-env 0.1.8 → 0.1.10

package/lib/client.js

@@ -179,18 +179,27 @@ var ResultValue = class {
 };
 
 // lib/typert.remote-client.js
+var envGroupSchema = () => import_zod.z.object({
+  id: import_zod.z.string().readonly(),
+  title: import_zod.z.string().readonly()
+}).readonly();
+var envEntrySchema = () => import_zod.z.object({
+  id: import_zod.z.string().readonly(),
+  name: import_zod.z.string().readonly(),
+  value: import_zod.z.string().readonly(),
+  groupId: import_zod.z.string().readonly(),
+  kind: import_zod.z.enum(["unchanged", "modified", "added"]).readonly(),
+  previous: import_zod.z.string().nullable().readonly()
+}).readonly();
 var list$result$schema$value;
 var list$result$schema = () => list$result$schema$value ??= import_zod.z.object({
   path: import_zod.z.string().readonly(),
   exists: import_zod.z.boolean().readonly(),
-  entries: import_zod.z.array(import_zod.z.object({
-    id: import_zod.z.string().readonly(),
-    name: import_zod.z.string().readonly(),
-    value: import_zod.z.string().readonly(),
-    kind: import_zod.z.enum(["unchanged", "modified", "added"]).readonly(),
-    previous: import_zod.z.string().nullable().readonly()
-  }).readonly()).readonly()
+  groups: import_zod.z.array(envGroupSchema()).readonly(),
+  entries: import_zod.z.array(envEntrySchema()).readonly()
 });
+var envGroup$result$schema$value;
+var envGroup$result$schema = () => envGroup$result$schema$value ??= envGroupSchema();
 var cliStatus$result$schema$value;
 var cliStatus$result$schema = () => cliStatus$result$schema$value ??= import_zod.z.object({
   platform: import_zod.z.string().readonly(),
@@ -201,38 +210,38 @@ var cliStatus$result$schema = () => cliStatus$result$schema$value ??= import_zod
   canInstall: import_zod.z.boolean().readonly(),
   reason: import_zod.z.string().nullable().readonly()
 });
-var upsert$parameter$0$schema$value;
-var upsert$parameter$0$schema = () => upsert$parameter$0$schema$value ??= import_zod.z.string();
-var upsert$parameter$1$schema$value;
-var upsert$parameter$1$schema = () => upsert$parameter$1$schema$value ??= import_zod.z.string();
-var upsert$parameter$2$schema$value;
-var upsert$parameter$2$schema = () => upsert$parameter$2$schema$value ??= import_zod.z.string();
-var remove$parameter$0$schema$value;
-var remove$parameter$0$schema = () => remove$parameter$0$schema$value ??= import_zod.z.string();
-var setVar$parameter$0$schema$value;
-var setVar$parameter$0$schema = () => setVar$parameter$0$schema$value ??= import_zod.z.string();
-var setVar$parameter$1$schema$value;
-var setVar$parameter$1$schema = () => setVar$parameter$1$schema$value ??= import_zod.z.string();
+var str = () => import_zod.z.string();
 var setVars$parameter$0$schema$value;
 var setVars$parameter$0$schema = () => setVars$parameter$0$schema$value ??= import_zod.z.array(import_zod.z.object({
   name: import_zod.z.string().readonly(),
-  value: import_zod.z.string().readonly()
+  value: import_zod.z.string().readonly(),
+  group: import_zod.z.string().optional()
 }).readonly()).readonly();
-var removeVar$parameter$0$schema$value;
-var removeVar$parameter$0$schema = () => removeVar$parameter$0$schema$value ??= import_zod.z.string();
 var removeVars$parameter$0$schema$value;
 var removeVars$parameter$0$schema = () => removeVars$parameter$0$schema$value ??= import_zod.z.array(import_zod.z.string()).readonly();
+var deleteGroup$parameter$1$schema$value;
+var deleteGroup$parameter$1$schema = () => deleteGroup$parameter$1$schema$value ??= import_zod.z.object({
+  moveToDefault: import_zod.z.boolean().readonly()
+}).readonly();
 var envVarWriteJsonSchema = {
   type: "object",
   properties: {
     name: { type: "string" },
-    value: { type: "string" }
+    value: { type: "string" },
+    group: { type: "string" }
   },
   required: ["name", "value"],
   additionalProperties: false
 };
-var restore$parameter$0$schema$value;
-var restore$parameter$0$schema = () => restore$parameter$0$schema$value ??= import_zod.z.string();
+var envGroupJsonSchema = {
+  type: "object",
+  properties: {
+    id: { type: "string" },
+    title: { type: "string" }
+  },
+  required: ["id", "title"],
+  additionalProperties: true
+};
 var cliStatusJsonSchema = {
   type: "object",
   properties: {
@@ -252,6 +261,10 @@ var envSnapshotJsonSchema = {
   properties: {
     path: { type: "string" },
     exists: { type: "boolean" },
+    groups: {
+      type: "array",
+      items: envGroupJsonSchema
+    },
     entries: {
       type: "array",
       items: {
@@ -260,90 +273,84 @@ var envSnapshotJsonSchema = {
           id: { type: "string" },
           name: { type: "string" },
           value: { type: "string" },
+          groupId: { type: "string" },
           kind: { type: "string", enum: ["unchanged", "modified", "added"] },
           previous: { type: ["string", "null"] }
         },
-        required: ["id", "name", "value", "kind", "previous"],
+        required: ["id", "name", "value", "groupId", "kind", "previous"],
         additionalProperties: true
       }
     }
   },
-  required: ["path", "exists", "entries"],
+  required: ["path", "exists", "groups", "entries"],
   additionalProperties: true
 };
+var stringParam = (name, description, options = {}) => ({
+  name,
+  description,
+  source: "json",
+  ...options.acceptsUndefined ? { acceptsUndefined: true } : {},
+  codec: {
+    mode: "strict",
+    typeSymbol: "string",
+    create: str,
+    jsonSchema: { type: "string" }
+  }
+});
+var snapshotResult = (description = "updated snapshot.") => ({
+  mode: "strict",
+  typeSymbol: "@woosau/dsh-custom-env/types#EnvSnapshot",
+  create: list$result$schema,
+  description,
+  jsonSchema: envSnapshotJsonSchema
+});
+var groupResult = (description = "group record.") => ({
+  mode: "strict",
+  typeSymbol: "@woosau/dsh-custom-env/types#EnvGroup",
+  create: envGroup$result$schema,
+  description,
+  jsonSchema: envGroupJsonSchema
+});
+var voidResult = {
+  mode: "strict",
+  typeSymbol: "void",
+  create: () => import_zod.z.undefined(),
+  description: "no return value.",
+  jsonSchema: { type: "null" }
+};
+var src = { file: "src/index.ts", line: 1, column: 1 };
 var TYPERT_REMOTE = createTypertRemoteInfo({
   package: "@woosau/dsh-custom-env",
   methods: {
     "customEnv/list": {
       service: "customEnv",
-      description: "List current $DSH_HOME/.env entries with pending classification.",
+      description: "List current $DSH_HOME/.env entries with groups and pending classification.",
       invocation: { kind: "direct" },
       parameters: [],
-      result: {
-        mode: "strict",
-        typeSymbol: "@woosau/dsh-custom-env/types#EnvSnapshot",
-        create: list$result$schema,
-        description: "path, existence, and sorted entries.",
-        jsonSchema: envSnapshotJsonSchema
-      },
-      sourceLocation: { file: "src/index.ts", line: 1, column: 1 }
+      result: snapshotResult("path, existence, groups, and sorted entries."),
+      sourceLocation: src
     },
     "customEnv/upsert": {
       service: "customEnv",
-      description: "Create or update one row. Empty id creates a new row; otherwise keeps that baseline id across renames.",
+      description: "Create or update one row. Empty id creates a new row; optional groupId assigns membership.",
       invocation: { kind: "direct" },
       parameters: [
-        {
-          name: "id",
-          description: "stable row id from list(), or empty string for a new row.",
-          source: "json",
-          codec: {
-            mode: "strict",
-            typeSymbol: "string",
-            create: upsert$parameter$0$schema,
-            jsonSchema: { type: "string" }
-          }
-        },
-        {
-          name: "name",
-          description: "writable variable name.",
-          source: "json",
-          codec: {
-            mode: "strict",
-            typeSymbol: "string",
-            create: upsert$parameter$1$schema,
-            jsonSchema: { type: "string" }
-          }
-        },
-        {
-          name: "value",
-          description: "value (empty string allowed).",
-          source: "json",
-          codec: {
-            mode: "strict",
-            typeSymbol: "string",
-            create: upsert$parameter$2$schema,
-            jsonSchema: { type: "string" }
-          }
-        }
+        stringParam("id", "stable row id from list(), or empty string for a new row."),
+        stringParam("name", "writable variable name."),
+        stringParam("value", "value (empty string allowed)."),
+        stringParam("groupId", "target group id for create/move (optional).", { acceptsUndefined: true })
       ],
-      result: {
-        mode: "strict",
-        typeSymbol: "@woosau/dsh-custom-env/types#EnvSnapshot",
-        create: list$result$schema,
-        description: "updated snapshot.",
-        jsonSchema: envSnapshotJsonSchema
-      },
-      sourceLocation: { file: "src/index.ts", line: 1, column: 1 }
+      result: snapshotResult(),
+      sourceLocation: src
     },
     "customEnv/setVars": {
       service: "customEnv",
-      description: "Create or replace many variables by name in one rewrite. Empty values write NAME=.",
+      description: "Create or replace many variables by name in one rewrite. Optional group per entry.",
       invocation: { kind: "direct" },
       parameters: [
         {
           name: "entries",
-          description: "name/value pairs (last duplicate name wins).",
+          description: "name/value pairs with optional group (last duplicate name wins).",
           source: "json",
           codec: {
             mode: "strict",
@@ -353,51 +360,20 @@ var TYPERT_REMOTE = createTypertRemoteInfo({
           }
         }
       ],
-      result: {
-        mode: "strict",
-        typeSymbol: "void",
-        create: () => import_zod.z.undefined(),
-        description: "no return value.",
-        jsonSchema: { type: "null" }
-      },
-      sourceLocation: { file: "src/index.ts", line: 1, column: 1 }
+      result: voidResult,
+      sourceLocation: src
     },
     "customEnv/setVar": {
       service: "customEnv",
-      description: "Create or replace one variable by name. Empty value writes NAME=.",
+      description: "Create or replace one variable by name. Optional group: new names default to default; existing keep group when omitted.",
       invocation: { kind: "direct" },
       parameters: [
-        {
-          name: "name",
-          description: "writable variable name.",
-          source: "json",
-          codec: {
-            mode: "strict",
-            typeSymbol: "string",
-            create: setVar$parameter$0$schema,
-            jsonSchema: { type: "string" }
-          }
-        },
-        {
-          name: "value",
-          description: "value to store (empty string allowed).",
-          source: "json",
-          codec: {
-            mode: "strict",
-            typeSymbol: "string",
-            create: setVar$parameter$1$schema,
-            jsonSchema: { type: "string" }
-          }
-        }
+        stringParam("name", "writable variable name."),
+        stringParam("value", "value to store (empty string allowed)."),
+        stringParam("group", "optional group id; omit to keep existing membership.", { acceptsUndefined: true })
       ],
-      result: {
-        mode: "strict",
-        typeSymbol: "void",
-        create: () => import_zod.z.undefined(),
-        description: "no return value.",
-        jsonSchema: { type: "null" }
-      },
-      sourceLocation: { file: "src/index.ts", line: 1, column: 1 }
+      result: voidResult,
+      sourceLocation: src
     },
     "customEnv/removeVars": {
       service: "customEnv",
@@ -423,24 +399,14 @@ var TYPERT_REMOTE = createTypertRemoteInfo({
         description: "number of .env lines removed.",
         jsonSchema: { type: "number" }
       },
-      sourceLocation: { file: "src/index.ts", line: 1, column: 1 }
+      sourceLocation: src
     },
     "customEnv/removeVar": {
       service: "customEnv",
       description: "Remove one variable by name from the file, Host, and OS user environment.",
       invocation: { kind: "direct" },
       parameters: [
-        {
-          name: "name",
-          description: "writable variable name.",
-          source: "json",
-          codec: {
-            mode: "strict",
-            typeSymbol: "string",
-            create: removeVar$parameter$0$schema,
-            jsonSchema: { type: "string" }
-          }
-        }
+        stringParam("name", "writable variable name.")
       ],
       result: {
         mode: "strict",
@@ -449,59 +415,85 @@ var TYPERT_REMOTE = createTypertRemoteInfo({
         description: "true when a .env line was removed.",
         jsonSchema: { type: "boolean" }
       },
-      sourceLocation: { file: "src/index.ts", line: 1, column: 1 }
+      sourceLocation: src
     },
     "customEnv/deleteEntry": {
       service: "customEnv",
       description: "Delete one entry from the file, Host, and OS user environment.",
       invocation: { kind: "direct" },
       parameters: [
-        {
-          name: "id",
-          description: "stable row id from list().",
-          source: "json",
-          codec: {
-            mode: "strict",
-            typeSymbol: "string",
-            create: remove$parameter$0$schema,
-            jsonSchema: { type: "string" }
-          }
-        }
+        stringParam("id", "stable row id from list().")
       ],
-      result: {
-        mode: "strict",
-        typeSymbol: "@woosau/dsh-custom-env/types#EnvSnapshot",
-        create: list$result$schema,
-        description: "updated snapshot.",
-        jsonSchema: envSnapshotJsonSchema
-      },
-      sourceLocation: { file: "src/index.ts", line: 1, column: 1 }
+      result: snapshotResult(),
+      sourceLocation: src
     },
     "customEnv/restore": {
       service: "customEnv",
       description: "Restore Host-start original name+value for this id, or delete if added after start.",
       invocation: { kind: "direct" },
       parameters: [
+        stringParam("id", "stable row id from list().")
+      ],
+      result: snapshotResult(),
+      sourceLocation: src
+    },
+    "customEnv/createGroup": {
+      service: "customEnv",
+      description: "Create a custom environment variable group.",
+      invocation: { kind: "direct" },
+      parameters: [
+        stringParam("title", "non-empty display title.")
+      ],
+      result: groupResult("created group."),
+      sourceLocation: src
+    },
+    "customEnv/renameGroup": {
+      service: "customEnv",
+      description: "Rename a custom group (not the default group).",
+      invocation: { kind: "direct" },
+      parameters: [
+        stringParam("id", "group id."),
+        stringParam("title", "new non-empty title.")
+      ],
+      result: groupResult("renamed group."),
+      sourceLocation: src
+    },
+    "customEnv/deleteGroup": {
+      service: "customEnv",
+      description: "Delete a custom group; optionally move members to default or remove their variables.",
+      invocation: { kind: "direct" },
+      parameters: [
+        stringParam("id", "group id (not default)."),
         {
-          name: "id",
-          description: "stable row id from list().",
+          name: "options",
+          description: "moveToDefault controls whether members are kept.",
           source: "json",
           codec: {
             mode: "strict",
-            typeSymbol: "string",
-            create: restore$parameter$0$schema,
-            jsonSchema: { type: "string" }
+            typeSymbol: "DeleteGroupOptions",
+            create: deleteGroup$parameter$1$schema,
+            jsonSchema: {
+              type: "object",
+              properties: { moveToDefault: { type: "boolean" } },
+              required: ["moveToDefault"],
+              additionalProperties: false
+            }
           }
         }
       ],
-      result: {
-        mode: "strict",
-        typeSymbol: "@woosau/dsh-custom-env/types#EnvSnapshot",
-        create: list$result$schema,
-        description: "updated snapshot.",
-        jsonSchema: envSnapshotJsonSchema
-      },
-      sourceLocation: { file: "src/index.ts", line: 1, column: 1 }
+      result: snapshotResult(),
+      sourceLocation: src
+    },
+    "customEnv/moveEntry": {
+      service: "customEnv",
+      description: "Move one row into another group.",
+      invocation: { kind: "direct" },
+      parameters: [
+        stringParam("id", "stable row id from list()."),
+        stringParam("groupId", "target group id.")
+      ],
+      result: snapshotResult(),
+      sourceLocation: src
     },
     "customEnv/cliStatus": {
       service: "customEnv",
@@ -515,7 +507,7 @@ var TYPERT_REMOTE = createTypertRemoteInfo({
         description: "active path, expected path, and whether Install should be offered.",
         jsonSchema: cliStatusJsonSchema
       },
-      sourceLocation: { file: "src/index.ts", line: 1, column: 1 }
+      sourceLocation: src
     },
     "customEnv/cliInstall": {
       service: "customEnv",
@@ -529,7 +521,7 @@ var TYPERT_REMOTE = createTypertRemoteInfo({
         description: "refreshed status after install.",
         jsonSchema: cliStatusJsonSchema
       },
-      sourceLocation: { file: "src/index.ts", line: 1, column: 1 }
+      sourceLocation: src
     }
   }
 }, import_zod.z);
@@ -539,6 +531,9 @@ var typert_remote_client_default = TYPERT_REMOTE;
 var import_react = require("react");
 var import_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
 
+// src/group-ids.ts
+var DEFAULT_GROUP_ID = "default";
+
 // src/client/format-remote-error.ts
 function isRemoteFailure(value) {
   return typeof value === "object" && value !== null && value.isDSHRemoteError === true && typeof value.code === "string";
@@ -547,6 +542,7 @@ function formatRemoteError(error, t) {
   if (isRemoteFailure(error)) {
     if (error.code === "custom-env/invalid-name") return t("error.invalidName");
     if (error.code === "custom-env/invalid-value") return t("error.invalidValue");
+    if (error.code === "custom-env/invalid-group") return t("error.invalidGroup");
     if (error.code === "custom-env/restore-failed") return t("error.restoreFailed");
     if (error.code === "custom-env/cli-install-failed") return t("error.cliInstall");
   }
@@ -626,23 +622,41 @@ function rowIdFromPoint(clientX, clientY) {
 }
 
 // src/client/EnvSettingsSection.module.css
-var css = ".EnvSettingsSection_section {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  max-width: 760px;\n  color: var(--dsw-alias-label-primary);\n}\n\n.EnvSettingsSection_heading {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 500;\n  line-height: 1.3;\n}\n\n/* \u2014\u2014 dsh CLI: exactly two lines (label + path) \u2014\u2014 */\n.EnvSettingsSection_cli {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.EnvSettingsSection_cliHeading {\n  margin: 0;\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 20px;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.EnvSettingsSection_cliBody {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 28px;\n  gap: 8px;\n  align-items: center;\n  height: 28px;\n}\n\n.EnvSettingsSection_cliPath {\n  margin: 0;\n  min-width: 0;\n  font-size: 13px;\n  line-height: 28px;\n  color: var(--dsw-alias-label-tertiary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.EnvSettingsSection_cliSlot {\n  display: flex;\n  width: 28px;\n  height: 28px;\n  align-items: center;\n  justify-content: center;\n}\n\n.EnvSettingsSection_cliSlot[data-empty='true'] {\n  visibility: hidden;\n  pointer-events: none;\n}\n\n.EnvSettingsSection_notice,\n.EnvSettingsSection_empty {\n  margin: 0;\n  font-size: 13px;\n  line-height: 18px;\n  color: var(--dsw-alias-label-tertiary);\n}\n\n.EnvSettingsSection_notice[data-tone='error'] {\n  color: var(--dsw-alias-label-danger, #c62828);\n}\n\n/* \u2014\u2014 variable list: CSS grid, not table (avoids Input overflow overlap) \u2014\u2014 */\n.EnvSettingsSection_list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  min-width: 0;\n}\n\n.EnvSettingsSection_header,\n.EnvSettingsSection_row {\n  display: grid;\n  grid-template-columns: minmax(120px, 0.85fr) minmax(0, 1.55fr) 100px;\n  gap: 10px;\n  align-items: center;\n  min-width: 0;\n}\n\n.EnvSettingsSection_row {\n  padding: 4px 6px;\n  margin: 0 -6px;\n  user-select: none;\n}\n\n.EnvSettingsSection_row[data-selected='true'] {\n  background: var(--dsw-alias-fill-hover, rgba(127, 127, 127, 0.1));\n}\n\n.EnvSettingsSection_row[data-composer='true'] {\n  user-select: auto;\n}\n\n.EnvSettingsSection_header {\n  padding: 0 0 2px;\n}\n\n.EnvSettingsSection_headerLabel {\n  margin: 0;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1.3;\n  color: var(--dsw-alias-label-tertiary);\n}\n\n.EnvSettingsSection_headerActions {\n  width: 100px;\n}\n\n.EnvSettingsSection_field {\n  min-width: 0;\n  overflow: hidden;\n}\n\n.EnvSettingsSection_fieldInput {\n  display: flex;\n  box-sizing: border-box;\n  width: 100%;\n  max-width: 100%;\n  min-width: 0;\n  /* Keep unfocused inputs out of drag text-select; focused field can still edit/select. */\n  user-select: none;\n}\n\n.EnvSettingsSection_field:focus-within,\n.EnvSettingsSection_field:focus-within .EnvSettingsSection_fieldInput,\n.EnvSettingsSection_row[data-composer='true'] .EnvSettingsSection_fieldInput {\n  user-select: text;\n}\n\n.EnvSettingsSection_actions {\n  display: grid;\n  grid-template-columns: repeat(3, 28px);\n  gap: 4px;\n  align-items: center;\n  justify-content: end;\n  width: 100px;\n  margin-left: auto;\n  flex-shrink: 0;\n}\n\n.EnvSettingsSection_slot {\n  display: flex;\n  width: 28px;\n  height: 28px;\n  align-items: center;\n  justify-content: center;\n}\n\n.EnvSettingsSection_slot[data-empty='true'] {\n  visibility: hidden;\n  pointer-events: none;\n}\n\n.EnvSettingsSection_iconButton {\n  display: inline-flex;\n  width: 28px;\n  height: 28px;\n  margin: 0;\n  padding: 0;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: var(--dsw-radius-sm, 6px);\n  background: transparent;\n  color: var(--dsw-alias-label-secondary);\n  cursor: pointer;\n}\n\n.EnvSettingsSection_iconButton:hover:not(:disabled) {\n  background: var(--dsw-alias-fill-hover, rgba(127, 127, 127, 0.12));\n  color: var(--dsw-alias-label-primary);\n}\n\n.EnvSettingsSection_iconButton:disabled {\n  opacity: 0.45;\n  cursor: default;\n}\n\n.EnvSettingsSection_iconButtonDanger:hover:not(:disabled) {\n  color: var(--dsw-alias-label-danger, #c62828);\n}\n\n.EnvSettingsSection_iconButtonPrimary {\n  color: var(--dsw-alias-brand-primary, #247bbf);\n}\n\n.EnvSettingsSection_restartBadge {\n  display: inline-flex;\n  width: 28px;\n  height: 28px;\n  align-items: center;\n  justify-content: center;\n  color: var(--dsw-alias-label-warning, #c67c00);\n}\n\n.EnvSettingsSection_spinner {\n  animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n  to { transform: rotate(360deg); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .EnvSettingsSection_spinner {\n    animation: none;\n  }\n}\n";
+var css = ".EnvSettingsSection_section {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  max-width: 760px;\n  min-width: 0;\n  color: var(--dsw-alias-label-primary);\n  container-type: inline-size;\n}\n\n.EnvSettingsSection_heading {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 500;\n  line-height: 1.3;\n}\n\n/* \u2014\u2014 dsh CLI: exactly two lines (label + path) \u2014\u2014 */\n.EnvSettingsSection_cli {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.EnvSettingsSection_cliHeading {\n  margin: 0;\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 20px;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.EnvSettingsSection_cliBody {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 28px;\n  gap: 8px;\n  align-items: center;\n  height: 28px;\n}\n\n.EnvSettingsSection_cliPath {\n  margin: 0;\n  min-width: 0;\n  font-size: 13px;\n  line-height: 28px;\n  color: var(--dsw-alias-label-tertiary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.EnvSettingsSection_cliSlot {\n  display: flex;\n  width: 28px;\n  height: 28px;\n  align-items: center;\n  justify-content: center;\n}\n\n.EnvSettingsSection_cliSlot[data-empty='true'] {\n  visibility: hidden;\n  pointer-events: none;\n}\n\n.EnvSettingsSection_notice {\n  margin: 0;\n  font-size: 13px;\n  line-height: 18px;\n  color: var(--dsw-alias-label-tertiary);\n}\n\n.EnvSettingsSection_notice[data-tone='error'] {\n  color: var(--dsw-alias-label-danger, #c62828);\n}\n\n/* \u2014\u2014 variable rows: name | value | actions \u2014\u2014 */\n.EnvSettingsSection_header,\n.EnvSettingsSection_row {\n  display: grid;\n  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr) 116px;\n  gap: 10px;\n  align-items: center;\n  min-width: 0;\n}\n\n.EnvSettingsSection_row {\n  padding: 4px 6px;\n  margin: 0 -6px;\n  user-select: none;\n}\n\n.EnvSettingsSection_row[data-selected='true'] {\n  background: var(--dsw-alias-fill-hover, rgba(127, 127, 127, 0.1));\n}\n\n.EnvSettingsSection_row[data-composer='true'] {\n  user-select: auto;\n}\n\n.EnvSettingsSection_header {\n  padding: 0 0 2px;\n}\n\n.EnvSettingsSection_headerLabel {\n  margin: 0;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1.3;\n  color: var(--dsw-alias-label-tertiary);\n}\n\n.EnvSettingsSection_headerActions {\n  width: 116px;\n}\n\n/* Extremely narrow pane: value wraps under name; actions stay on the first row. */\n@container (max-width: 360px) {\n  .EnvSettingsSection_header,\n  .EnvSettingsSection_row {\n    grid-template-columns: minmax(0, 1fr) 116px;\n    align-items: start;\n    row-gap: 8px;\n  }\n\n  .EnvSettingsSection_header {\n    align-items: end;\n  }\n\n  .EnvSettingsSection_header > :nth-child(1),\n  .EnvSettingsSection_row > :nth-child(1) {\n    grid-column: 1;\n    grid-row: 1;\n  }\n\n  .EnvSettingsSection_header > :nth-child(3),\n  .EnvSettingsSection_row > :nth-child(3) {\n    grid-column: 2;\n    grid-row: 1;\n  }\n\n  .EnvSettingsSection_header > :nth-child(2),\n  .EnvSettingsSection_row > :nth-child(2) {\n    grid-column: 1 / -1;\n    grid-row: 2;\n  }\n\n  .EnvSettingsSection_actions {\n    margin-left: 0;\n  }\n}\n\n.EnvSettingsSection_field {\n  min-width: 0;\n  overflow: hidden;\n}\n\n.EnvSettingsSection_fieldInput {\n  display: flex;\n  box-sizing: border-box;\n  width: 100%;\n  max-width: 100%;\n  min-width: 0;\n  user-select: none;\n}\n\n.EnvSettingsSection_field:focus-within,\n.EnvSettingsSection_field:focus-within .EnvSettingsSection_fieldInput,\n.EnvSettingsSection_row[data-composer='true'] .EnvSettingsSection_fieldInput {\n  user-select: text;\n}\n\n.EnvSettingsSection_actions {\n  display: grid;\n  grid-template-columns: repeat(4, 26px);\n  gap: 2px;\n  align-items: center;\n  justify-content: end;\n  width: 116px;\n  margin-left: auto;\n  flex-shrink: 0;\n}\n\n.EnvSettingsSection_slot {\n  display: flex;\n  width: 26px;\n  height: 26px;\n  align-items: center;\n  justify-content: center;\n}\n\n.EnvSettingsSection_slot[data-empty='true'] {\n  visibility: hidden;\n  pointer-events: none;\n}\n\n.EnvSettingsSection_iconButton {\n  display: inline-flex;\n  width: 26px;\n  height: 26px;\n  margin: 0;\n  padding: 0;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: var(--dsw-radius-sm, 6px);\n  background: transparent;\n  color: var(--dsw-alias-label-secondary);\n  cursor: pointer;\n}\n\n.EnvSettingsSection_iconButton:hover:not(:disabled) {\n  background: var(--dsw-alias-fill-hover, rgba(127, 127, 127, 0.12));\n  color: var(--dsw-alias-label-primary);\n}\n\n.EnvSettingsSection_iconButton:disabled {\n  opacity: 0.45;\n  cursor: default;\n}\n\n.EnvSettingsSection_iconButtonDanger:hover:not(:disabled) {\n  color: var(--dsw-alias-label-danger, #c62828);\n}\n\n.EnvSettingsSection_iconButtonPrimary {\n  color: var(--dsw-alias-brand-primary, #247bbf);\n}\n\n.EnvSettingsSection_restartBadge {\n  display: inline-flex;\n  width: 26px;\n  height: 26px;\n  align-items: center;\n  justify-content: center;\n  color: var(--dsw-alias-label-warning, #c67c00);\n}\n\n.EnvSettingsSection_spinner {\n  animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n  to { transform: rotate(360deg); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .EnvSettingsSection_spinner {\n    animation: none;\n  }\n}\n\n.EnvSettingsSection_groups {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  min-width: 0;\n}\n\n.EnvSettingsSection_group {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  min-width: 0;\n}\n\n.EnvSettingsSection_group + .EnvSettingsSection_group {\n  border-top: 0.5px solid var(--dsw-alias-border-l2, rgba(127, 127, 127, 0.25));\n  padding-top: 14px;\n}\n\n.EnvSettingsSection_groupTitleRow {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-height: 36px;\n}\n\n.EnvSettingsSection_groupToggle {\n  display: flex;\n  flex: none;\n  align-items: center;\n  gap: 8px;\n  border: 0;\n  padding: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  text-align: left;\n  cursor: pointer;\n}\n\n.EnvSettingsSection_groupToggle:focus-visible {\n  outline: 2px solid var(--dsw-alias-brand-primary, #247bbf);\n  outline-offset: 2px;\n}\n\n.EnvSettingsSection_groupToggle > .EnvSettingsSection_chevron {\n  transform: rotate(-90deg);\n}\n\n.EnvSettingsSection_groupToggle[aria-expanded='true'] > .EnvSettingsSection_chevron {\n  transform: none;\n}\n\n.EnvSettingsSection_groupTitle {\n  font-size: 14px;\n  line-height: 22px;\n  font-weight: 400;\n  color: var(--dsw-alias-label-primary);\n}\n\n.EnvSettingsSection_headerEnd {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  margin-left: auto;\n}\n\n.EnvSettingsSection_groupBody {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  min-width: 0;\n}\n\n.EnvSettingsSection_modalField {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-top: 8px;\n}\n\n.EnvSettingsSection_modalCheck {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 12px;\n  font-size: 13px;\n  line-height: 18px;\n  color: var(--dsw-alias-label-secondary);\n}\n";
 if (typeof document !== "undefined" && !document.getElementById("dsh-custom-env-css")) {
   const style = document.createElement("style");
   style.id = "dsh-custom-env-css";
   style.textContent = css;
   document.head.appendChild(style);
 }
-var EnvSettingsSection_default = { "section": "EnvSettingsSection_section", "heading": "EnvSettingsSection_heading", "cli": "EnvSettingsSection_cli", "cliHeading": "EnvSettingsSection_cliHeading", "cliBody": "EnvSettingsSection_cliBody", "cliPath": "EnvSettingsSection_cliPath", "cliSlot": "EnvSettingsSection_cliSlot", "notice": "EnvSettingsSection_notice", "empty": "EnvSettingsSection_empty", "list": "EnvSettingsSection_list", "header": "EnvSettingsSection_header", "row": "EnvSettingsSection_row", "headerLabel": "EnvSettingsSection_headerLabel", "headerActions": "EnvSettingsSection_headerActions", "field": "EnvSettingsSection_field", "fieldInput": "EnvSettingsSection_fieldInput", "actions": "EnvSettingsSection_actions", "slot": "EnvSettingsSection_slot", "iconButton": "EnvSettingsSection_iconButton", "iconButtonDanger": "EnvSettingsSection_iconButtonDanger", "iconButtonPrimary": "EnvSettingsSection_iconButtonPrimary", "restartBadge": "EnvSettingsSection_restartBadge", "spinner": "EnvSettingsSection_spinner" };
+var EnvSettingsSection_default = { "section": "EnvSettingsSection_section", "heading": "EnvSettingsSection_heading", "cli": "EnvSettingsSection_cli", "cliHeading": "EnvSettingsSection_cliHeading", "cliBody": "EnvSettingsSection_cliBody", "cliPath": "EnvSettingsSection_cliPath", "cliSlot": "EnvSettingsSection_cliSlot", "notice": "EnvSettingsSection_notice", "header": "EnvSettingsSection_header", "row": "EnvSettingsSection_row", "headerLabel": "EnvSettingsSection_headerLabel", "headerActions": "EnvSettingsSection_headerActions", "actions": "EnvSettingsSection_actions", "field": "EnvSettingsSection_field", "fieldInput": "EnvSettingsSection_fieldInput", "slot": "EnvSettingsSection_slot", "iconButton": "EnvSettingsSection_iconButton", "iconButtonDanger": "EnvSettingsSection_iconButtonDanger", "iconButtonPrimary": "EnvSettingsSection_iconButtonPrimary", "restartBadge": "EnvSettingsSection_restartBadge", "spinner": "EnvSettingsSection_spinner", "groups": "EnvSettingsSection_groups", "group": "EnvSettingsSection_group", "groupTitleRow": "EnvSettingsSection_groupTitleRow", "groupToggle": "EnvSettingsSection_groupToggle", "chevron": "EnvSettingsSection_chevron", "groupTitle": "EnvSettingsSection_groupTitle", "headerEnd": "EnvSettingsSection_headerEnd", "groupBody": "EnvSettingsSection_groupBody", "modalField": "EnvSettingsSection_modalField", "modalCheck": "EnvSettingsSection_modalCheck" };
 
 // src/client/EnvSettingsSection.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var NAME_OK2 = /^[A-Za-z_][A-Za-z0-9_]*$/u;
-var COMPOSER_ID = "";
 var PENDING_PREFIX = "pending:";
+var COMPOSER_PREFIX = "composer:";
 function isPendingId(id) {
   return id.startsWith(PENDING_PREFIX);
 }
+function composerId(groupId) {
+  return `${COMPOSER_PREFIX}${groupId}`;
+}
+function isComposerId(id) {
+  return id.startsWith(COMPOSER_PREFIX);
+}
+function rowsByGroup(groups, entries, pendingOrder, pendingGroup) {
+  const saved = new Map(groups.map((group) => [group.id, []]));
+  const pending = new Map(groups.map((group) => [group.id, []]));
+  for (const entry of entries) {
+    (saved.get(saved.has(entry.groupId) ? entry.groupId : DEFAULT_GROUP_ID) ?? saved.get(DEFAULT_GROUP_ID)).push(entry);
+  }
+  for (const id of pendingOrder) {
+    const groupId = pendingGroup[id] ?? DEFAULT_GROUP_ID;
+    (pending.get(pending.has(groupId) ? groupId : DEFAULT_GROUP_ID) ?? pending.get(DEFAULT_GROUP_ID)).push(id);
+  }
+  return { saved, pending };
+}
 function IconAction({
   label,
   disabled,
@@ -675,14 +689,37 @@ function RowActions({
   canConfirm,
   pending = false,
   showRemove = true,
+  moveItems,
   onConfirm,
   onCancel,
   onRestore,
-  onRemove
+  onRemove,
+  onMove
 }) {
+  const [moveOpen, setMoveOpen] = (0, import_react.useState)(false);
+  const showMove = moveItems !== void 0 && moveItems.length > 0 && onMove !== void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: EnvSettingsSection_default.actions, role: "group", "aria-label": t("field.actions"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slot, { empty: !dirty && !pending, children: dirty ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconAction, { label: loading ? t("panel.loading") : t("action.confirm"), primary: true, disabled: busy || !canConfirm, onClick: onConfirm, children: loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dsh_client_ui_primitives.IconLoadingOutlineRegular, { className: EnvSettingsSection_default.spinner, size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dsh_client_ui_primitives.IconCheckOutlineRegular, { size: 14 }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dsh_client_ui_primitives.Tooltip, { portal: true, label: t("status.restartRequired"), side: "top", delayMs: 400, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: EnvSettingsSection_default.restartBadge, role: "img", "aria-label": t("status.restartRequired"), title: t("status.restartRequired"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dsh_client_ui_primitives.IconWarningOutlineRegular, { size: 14 }) }) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slot, { empty: !dirty && !pending, children: dirty ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconAction, { label: t("action.cancel"), disabled: busy, onClick: onCancel, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dsh_client_ui_primitives.IconCloseOutlineRegular, { size: 14 }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconAction, { label: t("action.restore"), disabled: busy, onClick: onRestore, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dsh_client_ui_primitives.IconRefreshOutlineRegular, { size: 14 }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slot, { empty: !showMove, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_dsh_client_ui_primitives.Menu,
+      {
+        open: moveOpen,
+        onClose: () => {
+          setMoveOpen(false);
+        },
+        items: (moveItems ?? []).map((item) => ({ id: item.id, label: item.label })),
+        onSelect: (groupId) => {
+          setMoveOpen(false);
+          onMove?.(groupId);
+        },
+        align: "end",
+        portal: true,
+        anchor: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconAction, { label: t("action.moveGroup"), disabled: busy, onClick: () => {
+          setMoveOpen((value) => !value);
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dsh_client_ui_primitives.IconFolderOpenOutlineRegular, { size: 14 }) })
+      }
+    ) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slot, { empty: !showRemove, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconAction, { label: t("action.remove"), danger: true, disabled: busy, onClick: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dsh_client_ui_primitives.IconTrashOutlineRegular, { size: 14 }) }) })
   ] });
 }
@@ -718,23 +755,33 @@ function EnvSettingsSection({
   upsert,
   remove,
   restore,
+  moveEntry,
+  createGroup,
+  renameGroup,
+  deleteGroup,
   cliStatus,
   cliInstall
 }) {
   const [snapshot, setSnapshot] = (0, import_react.useState)();
   const [cli, setCli] = (0, import_react.useState)();
-  const [drafts, setDrafts] = (0, import_react.useState)({ [COMPOSER_ID]: { name: "", value: "" } });
+  const [drafts, setDrafts] = (0, import_react.useState)({});
   const [pendingOrder, setPendingOrder] = (0, import_react.useState)([]);
+  const [pendingGroup, setPendingGroup] = (0, import_react.useState)({});
+  const [openGroups, setOpenGroups] = (0, import_react.useState)({ [DEFAULT_GROUP_ID]: true });
   const [busyTarget, setBusyTarget] = (0, import_react.useState)();
   const [error, setError] = (0, import_react.useState)();
   const [nameError, setNameError] = (0, import_react.useState)(false);
   const [pendingRemove, setPendingRemove] = (0, import_react.useState)();
+  const [groupModal, setGroupModal] = (0, import_react.useState)();
+  const [groupTitleDraft, setGroupTitleDraft] = (0, import_react.useState)("");
   const [selectedIds, setSelectedIds] = (0, import_react.useState)(() => /* @__PURE__ */ new Set());
   const pendingSeq = (0, import_react.useRef)(0);
   const draftsRef = (0, import_react.useRef)(drafts);
   draftsRef.current = drafts;
   const pendingOrderRef = (0, import_react.useRef)(pendingOrder);
   pendingOrderRef.current = pendingOrder;
+  const pendingGroupRef = (0, import_react.useRef)(pendingGroup);
+  pendingGroupRef.current = pendingGroup;
   const selectedRef = (0, import_react.useRef)(selectedIds);
   selectedRef.current = selectedIds;
   const anchorIdRef = (0, import_react.useRef)(void 0);
@@ -743,35 +790,61 @@ function EnvSettingsSection({
   const dragPendingCrossRef = (0, import_react.useRef)(false);
   const pendingRemoveRef = (0, import_react.useRef)(pendingRemove);
   pendingRemoveRef.current = pendingRemove;
+  const groupModalRef = (0, import_react.useRef)(groupModal);
+  groupModalRef.current = groupModal;
   const busy = busyTarget !== void 0;
+  const groups = snapshot?.groups ?? [{ id: DEFAULT_GROUP_ID, title: t("group.defaultTitle") }];
   const entries = snapshot?.entries ?? [];
   const taken = new Set(entries.map((entry) => entry.name));
-  const selectableOrder = [...entries.map((entry) => entry.id), ...pendingOrder];
+  const grouped = rowsByGroup(groups, entries, pendingOrder, pendingGroup);
+  const selectableOrder = groups.flatMap((group) => [
+    ...(grouped.saved.get(group.id) ?? []).map((entry) => entry.id),
+    ...grouped.pending.get(group.id) ?? []
+  ]);
   const selectableOrderRef = (0, import_react.useRef)(selectableOrder);
   selectableOrderRef.current = selectableOrder;
-  const keepPendingDrafts = (current, dropId) => {
+  const groupLabel = (group) => group.id === DEFAULT_GROUP_ID ? t("group.defaultTitle") : group.title;
+  const keepTransientDrafts = (current, dropId) => {
     const kept = {};
     for (const [id, draft] of Object.entries(current)) {
-      if (!isPendingId(id) || id === dropId) continue;
-      kept[id] = draft;
+      if (isComposerId(id)) kept[id] = draft;
+      else if (isPendingId(id) && id !== dropId) kept[id] = draft;
     }
     return kept;
   };
+  const emptyComposers = (nextGroups, current) => Object.fromEntries(nextGroups.map((group) => {
+    const id = composerId(group.id);
+    return [id, current[id] ?? { name: "", value: "" }];
+  }));
+  const forgetPendingId = (id) => {
+    setPendingOrder((order) => order.filter((item) => item !== id));
+    setPendingGroup((previous) => {
+      if (previous[id] === void 0) return previous;
+      const next = { ...previous };
+      delete next[id];
+      return next;
+    });
+    setSelectedIds((previous) => {
+      if (!previous.has(id)) return previous;
+      const next = new Set(previous);
+      next.delete(id);
+      return next;
+    });
+    if (anchorIdRef.current === id) anchorIdRef.current = void 0;
+  };
   const applySnapshot = (next, dropPendingId) => {
     setSnapshot(next);
-    if (dropPendingId !== void 0) {
-      setPendingOrder((order) => order.filter((item) => item !== dropPendingId));
-      setSelectedIds((previous) => {
-        if (!previous.has(dropPendingId)) return previous;
-        const ids = new Set(previous);
-        ids.delete(dropPendingId);
-        return ids;
-      });
-      if (anchorIdRef.current === dropPendingId) anchorIdRef.current = void 0;
-    }
+    setOpenGroups((previous) => {
+      const merged = { ...previous };
+      for (const group of next.groups) {
+        if (merged[group.id] === void 0) merged[group.id] = group.id === DEFAULT_GROUP_ID;
+      }
+      return merged;
+    });
+    if (dropPendingId !== void 0) forgetPendingId(dropPendingId);
     setDrafts((current) => ({
-      [COMPOSER_ID]: { name: "", value: "" },
-      ...keepPendingDrafts(current, dropPendingId),
+      ...emptyComposers(next.groups, current),
+      ...keepTransientDrafts(current, dropPendingId),
       ...Object.fromEntries(next.entries.map((entry) => [entry.id, { name: entry.name, value: entry.value }]))
     }));
   };
@@ -782,14 +855,7 @@ function EnvSettingsSection({
     }));
   };
   const dropPending = (id) => {
-    setPendingOrder((order) => order.filter((item) => item !== id));
-    setSelectedIds((previous) => {
-      if (!previous.has(id)) return previous;
-      const next = new Set(previous);
-      next.delete(id);
-      return next;
-    });
-    if (anchorIdRef.current === id) anchorIdRef.current = void 0;
+    forgetPendingId(id);
     setDrafts((previous) => {
       const next = { ...previous };
       delete next[id];
@@ -832,11 +898,13 @@ function EnvSettingsSection({
     setError(void 0);
     try {
       setPendingOrder([]);
+      setPendingGroup({});
       clearSelection();
       const next = await load();
       setSnapshot(next);
+      setOpenGroups(Object.fromEntries(next.groups.map((group) => [group.id, group.id === DEFAULT_GROUP_ID])));
       setDrafts({
-        [COMPOSER_ID]: { name: "", value: "" },
+        ...emptyComposers(next.groups, {}),
         ...Object.fromEntries(next.entries.map((entry) => [entry.id, { name: entry.name, value: entry.value }]))
       });
       try {
@@ -854,13 +922,12 @@ function EnvSettingsSection({
     void refresh();
   }, [refresh]);
   (0, import_react.useEffect)(() => {
-    const allowed = new Set(selectableOrder);
-    pruneSelection(allowed);
+    pruneSelection(new Set(selectableOrder));
   }, [selectableOrder.join("\0")]);
   const stopEditingGesture = () => {
     clearDomTextSelection();
     const active = document.activeElement;
-    if (active instanceof HTMLInputElement && active.closest(`.${EnvSettingsSection_default.list}`) !== null) active.blur();
+    if (active instanceof HTMLInputElement && active.closest(`.${EnvSettingsSection_default.groups}`) !== null) active.blur();
   };
   const applyDragOverRow = (id) => {
     if (dragModeRef.current === void 0) return;
@@ -899,7 +966,7 @@ function EnvSettingsSection({
       if (id !== void 0) applyDragOverRow(id);
     };
     const onPointerDown = (event) => {
-      if (selectedRef.current.size === 0 || pendingRemoveRef.current !== void 0) return;
+      if (selectedRef.current.size === 0 || pendingRemoveRef.current !== void 0 || groupModalRef.current !== void 0) return;
       if (!(event.target instanceof Element)) return;
       if (event.target.closest("[data-env-row]") !== null) return;
       clearSelection();
@@ -955,37 +1022,42 @@ function EnvSettingsSection({
     }
     if (draft.value === "") return;
     setNameError(false);
-    void run(`pending:${id}`, () => upsert(COMPOSER_ID, name, draft.value), id);
+    const groupId = pendingGroup[id] ?? DEFAULT_GROUP_ID;
+    void run(`pending:${id}`, () => upsert("", name, draft.value, groupId), id);
   };
-  const typeIntoComposer = (patch, focus) => {
+  const typeIntoComposer = (groupId, patch, focus) => {
     setNameError(false);
-    const base = draftsRef.current[COMPOSER_ID] ?? { name: "", value: "" };
+    const key = composerId(groupId);
+    const base = draftsRef.current[key] ?? { name: "", value: "" };
     const next = { name: patch.name ?? base.name, value: patch.value ?? base.value };
     const id = `${PENDING_PREFIX}${++pendingSeq.current}`;
     setDrafts((previous) => ({
       ...previous,
       [id]: next,
-      [COMPOSER_ID]: { name: "", value: "" }
+      [key]: { name: "", value: "" }
     }));
     setPendingOrder((order) => [...order, id]);
+    setPendingGroup((previous) => ({ ...previous, [id]: groupId }));
     queueMicrotask(() => {
       document.getElementById(`env-${focus}-${id}`)?.focus();
     });
   };
-  const appendPendingPairs = (pairs) => {
+  const appendPendingPairs = (groupId, pairs) => {
     if (pairs.length === 0) return;
     setNameError(false);
     const previous = draftsRef.current;
     const order = pendingOrderRef.current;
-    const nextDrafts = { ...previous, [COMPOSER_ID]: { name: "", value: "" } };
-    const savedByName = new Map(entries.map((entry) => [entry.name, entry.id]));
+    const groupsByPending = pendingGroupRef.current;
+    const nextDrafts = { ...previous, [composerId(groupId)]: { name: "", value: "" } };
     const existingPendingByName = /* @__PURE__ */ new Map();
     for (const id of order) {
       const draft = previous[id];
       if (draft !== void 0) existingPendingByName.set(draft.name.trim(), id);
     }
+    const savedByName = new Map(entries.map((entry) => [entry.name, entry.id]));
     const added = [];
-    const dropPending2 = /* @__PURE__ */ new Set();
+    const dropPendingIds = /* @__PURE__ */ new Set();
+    const nextPendingGroup = { ...groupsByPending };
     for (const pair of pairs) {
       const savedId = savedByName.get(pair.name);
       if (savedId !== void 0) {
@@ -993,7 +1065,8 @@ function EnvSettingsSection({
         const pendingDup = existingPendingByName.get(pair.name);
         if (pendingDup !== void 0) {
           delete nextDrafts[pendingDup];
-          dropPending2.add(pendingDup);
+          dropPendingIds.add(pendingDup);
+          delete nextPendingGroup[pendingDup];
           existingPendingByName.delete(pair.name);
         }
         continue;
@@ -1006,19 +1079,21 @@ function EnvSettingsSection({
       const id = `${PENDING_PREFIX}${++pendingSeq.current}`;
       nextDrafts[id] = { name: pair.name, value: pair.value };
       existingPendingByName.set(pair.name, id);
+      nextPendingGroup[id] = groupId;
       added.push(id);
     }
     setDrafts(nextDrafts);
-    if (added.length > 0 || dropPending2.size > 0) {
-      setPendingOrder([...order.filter((id) => !dropPending2.has(id)), ...added]);
+    setPendingGroup(nextPendingGroup);
+    if (added.length > 0 || dropPendingIds.size > 0) {
+      setPendingOrder([...order.filter((id) => !dropPendingIds.has(id)), ...added]);
     }
   };
-  const onComposerPaste = (event) => {
+  const onComposerPaste = (groupId, event) => {
     const text = event.clipboardData.getData("text");
     const pairs = parseEnvPaste(text);
     if (pairs.length === 0) return;
     event.preventDefault();
-    appendPendingPairs(pairs);
+    appendPendingPairs(groupId, pairs);
   };
   const onRowMouseDown = (id, event) => {
     if (event.button !== 0) return;
@@ -1053,11 +1128,246 @@ function EnvSettingsSection({
     dragVisitedRef.current = /* @__PURE__ */ new Set([id]);
     dragPendingCrossRef.current = true;
   };
-  const composer = drafts[COMPOSER_ID] ?? { name: "", value: "" };
+  const submitGroupModal = () => {
+    if (groupModal === void 0 || busyTarget !== void 0) return;
+    if (groupModal.kind === "create" || groupModal.kind === "rename") {
+      const title = groupTitleDraft.trim();
+      if (title === "") return;
+      setBusyTarget("group");
+      setError(void 0);
+      void (async () => {
+        try {
+          if (groupModal.kind === "create") {
+            const group = await createGroup(title);
+            const next = await load();
+            applySnapshot(next);
+            setOpenGroups((previous) => ({ ...previous, [group.id]: true }));
+          } else {
+            await renameGroup(groupModal.id, title);
+            applySnapshot(await load());
+          }
+          setGroupModal(void 0);
+        } catch (err) {
+          setError(formatRemoteError(err, t));
+        } finally {
+          setBusyTarget(void 0);
+        }
+      })();
+      return;
+    }
+    setBusyTarget("group");
+    setError(void 0);
+    void (async () => {
+      try {
+        applySnapshot(await deleteGroup(groupModal.id, groupModal.moveToDefault));
+        setGroupModal(void 0);
+      } catch (err) {
+        setError(formatRemoteError(err, t));
+      } finally {
+        setBusyTarget(void 0);
+      }
+    })();
+  };
   const cliInstalling = busyTarget === "cli";
   const cliBooting = busyTarget === "boot" || cli === void 0;
   const showCliAction = cli?.canInstall === true || cliInstalling;
   const notice = error ?? (nameError ? t("error.invalidName") : void 0) ?? (cli?.reason === "could-not-resolve-expected-cli" ? t("error.cliUnresolved") : void 0) ?? (cli?.reason === "unsupported-platform" ? t("error.cliUnsupported") : void 0);
+  const moveTargets = (currentGroupId) => groups.filter((group) => group.id !== currentGroupId).map((group) => ({ id: group.id, label: groupLabel(group) }));
+  const renderRow = (entry) => {
+    const draft = drafts[entry.id] ?? { name: entry.name, value: entry.value };
+    const dirty = draft.name !== entry.name || draft.value !== entry.value;
+    const pendingKind = entry.kind === "added" || entry.kind === "modified";
+    const loading = busyTarget === `row:${entry.id}`;
+    const nextName = draft.name.trim();
+    const canConfirm = NAME_OK2.test(nextName) && draft.value !== "" && !(nextName !== entry.name && taken.has(nextName));
+    const selected = selectedIds.has(entry.id);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: EnvSettingsSection_default.row,
+        "data-env-row": entry.id,
+        "data-selected": selected ? "true" : "false",
+        "aria-selected": selected,
+        onMouseDown: (event) => {
+          onRowMouseDown(entry.id, event);
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            Field,
+            {
+              id: `env-name-${entry.id}`,
+              value: draft.name,
+              disabled: busy,
+              title: draft.name,
+              invalid: nameError && dirty,
+              label: t("field.name"),
+              rowSelectGestures: true,
+              onChange: (name) => {
+                setNameError(false);
+                setDraft(entry.id, { name });
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            Field,
+            {
+              id: `env-value-${entry.id}`,
+              value: draft.value,
+              disabled: busy,
+              title: draft.value,
+              label: t("field.value"),
+              rowSelectGestures: true,
+              onChange: (value) => {
+                setDraft(entry.id, { value });
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            RowActions,
+            {
+              t,
+              busy,
+              loading,
+              dirty: dirty || loading,
+              canConfirm,
+              pending: pendingKind && !dirty ? true : false,
+              moveItems: moveTargets(entry.groupId),
+              onConfirm: () => {
+                saveExisting(entry.id, entry.name);
+              },
+              onCancel: () => {
+                setNameError(false);
+                setDraft(entry.id, { name: entry.name, value: entry.value });
+              },
+              onRestore: () => {
+                void run(`row:${entry.id}`, () => restore(entry.id));
+              },
+              onRemove: () => {
+                setPendingRemove({ id: entry.id, name: entry.name });
+              },
+              onMove: (groupId) => {
+                void run(`row:${entry.id}`, () => moveEntry(entry.id, groupId));
+              }
+            }
+          )
+        ]
+      },
+      entry.id
+    );
+  };
+  const renderPending = (id, groupId) => {
+    const draft = drafts[id] ?? { name: "", value: "" };
+    const loading = busyTarget === `pending:${id}`;
+    const nextName = draft.name.trim();
+    const canConfirm = NAME_OK2.test(nextName) && draft.value !== "" && !taken.has(nextName);
+    const selected = selectedIds.has(id);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: EnvSettingsSection_default.row,
+        "data-env-row": id,
+        "data-selected": selected ? "true" : "false",
+        "aria-selected": selected,
+        onMouseDown: (event) => {
+          onRowMouseDown(id, event);
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            Field,
+            {
+              id: `env-name-${id}`,
+              value: draft.name,
+              disabled: busy,
+              title: draft.name,
+              invalid: nameError,
+              label: t("field.name"),
+              rowSelectGestures: true,
+              onChange: (name) => {
+                setNameError(false);
+                setDraft(id, { name });
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            Field,
+            {
+              id: `env-value-${id}`,
+              value: draft.value,
+              disabled: busy,
+              title: draft.value,
+              label: t("field.value"),
+              rowSelectGestures: true,
+              onChange: (value) => {
+                setDraft(id, { value });
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            RowActions,
+            {
+              t,
+              busy,
+              loading,
+              dirty: true,
+              canConfirm,
+              showRemove: false,
+              onConfirm: () => {
+                savePending(id);
+              },
+              onCancel: () => {
+                setNameError(false);
+                dropPending(id);
+              },
+              onRestore: () => void 0,
+              onRemove: () => void 0
+            }
+          )
+        ]
+      },
+      id
+    );
+  };
+  const renderComposer = (groupId) => {
+    const key = composerId(groupId);
+    const composer = drafts[key] ?? { name: "", value: "" };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: EnvSettingsSection_default.row, "data-composer": "true", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Field,
+        {
+          id: `env-new-name-${groupId}`,
+          value: composer.name,
+          disabled: busy,
+          placeholder: t("field.namePlaceholder"),
+          title: composer.name || t("field.namePlaceholder"),
+          label: t("field.name"),
+          onChange: (name) => {
+            typeIntoComposer(groupId, { name }, "name");
+          },
+          onPaste: (event) => {
+            onComposerPaste(groupId, event);
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Field,
+        {
+          id: `env-new-value-${groupId}`,
+          value: composer.value,
+          disabled: busy,
+          placeholder: t("field.valuePlaceholder"),
+          title: composer.value || t("field.valuePlaceholder"),
+          label: t("field.value"),
+          onChange: (value) => {
+            typeIntoComposer(groupId, { value }, "value");
+          },
+          onPaste: (event) => {
+            onComposerPaste(groupId, event);
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: EnvSettingsSection_default.actions, "aria-hidden": "true" })
+    ] });
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: EnvSettingsSection_default.section, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: EnvSettingsSection_default.heading, children: t("panel.title") }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: EnvSettingsSection_default.cli, "aria-label": t("cli.title"), children: [
@@ -1097,197 +1407,83 @@ function EnvSettingsSection({
       ] })
     ] }),
     notice !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: EnvSettingsSection_default.notice, "data-tone": error !== void 0 || nameError ? "error" : void 0, role: "status", children: notice }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: EnvSettingsSection_default.list, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: EnvSettingsSection_default.header, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: EnvSettingsSection_default.headerLabel, children: t("field.name") }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: EnvSettingsSection_default.headerLabel, children: t("field.value") }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: EnvSettingsSection_default.headerActions, "aria-hidden": "true" })
-      ] }),
-      snapshot !== void 0 && entries.length === 0 && pendingOrder.length === 0 && notice === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: EnvSettingsSection_default.empty, children: t("panel.empty") }) : null,
-      entries.map((entry) => {
-        const draft = drafts[entry.id] ?? { name: entry.name, value: entry.value };
-        const dirty = draft.name !== entry.name || draft.value !== entry.value;
-        const pending = entry.kind === "added" || entry.kind === "modified";
-        const loading = busyTarget === `row:${entry.id}`;
-        const nextName = draft.name.trim();
-        const canConfirm = NAME_OK2.test(nextName) && draft.value !== "" && !(nextName !== entry.name && taken.has(nextName));
-        const selected = selectedIds.has(entry.id);
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "div",
-          {
-            className: EnvSettingsSection_default.row,
-            "data-env-row": entry.id,
-            "data-selected": selected ? "true" : "false",
-            "aria-selected": selected,
-            onMouseDown: (event) => {
-              onRowMouseDown(entry.id, event);
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                Field,
-                {
-                  id: `env-name-${entry.id}`,
-                  value: draft.name,
-                  disabled: busy,
-                  title: draft.name,
-                  invalid: nameError && dirty,
-                  label: t("field.name"),
-                  rowSelectGestures: true,
-                  onChange: (name) => {
-                    setNameError(false);
-                    setDraft(entry.id, { name });
-                  }
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                Field,
-                {
-                  id: `env-value-${entry.id}`,
-                  value: draft.value,
-                  disabled: busy,
-                  title: draft.value,
-                  label: t("field.value"),
-                  rowSelectGestures: true,
-                  onChange: (value) => {
-                    setDraft(entry.id, { value });
-                  }
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                RowActions,
-                {
-                  t,
-                  busy,
-                  loading,
-                  dirty: dirty || loading,
-                  canConfirm,
-                  pending,
-                  onConfirm: () => {
-                    saveExisting(entry.id, entry.name);
-                  },
-                  onCancel: () => {
-                    setNameError(false);
-                    setDraft(entry.id, { name: entry.name, value: entry.value });
-                  },
-                  onRestore: () => {
-                    void run(`row:${entry.id}`, () => restore(entry.id));
-                  },
-                  onRemove: () => {
-                    setPendingRemove({ id: entry.id, name: entry.name });
-                  }
-                }
-              )
-            ]
-          },
-          entry.id
-        );
-      }),
-      pendingOrder.map((id) => {
-        const draft = drafts[id] ?? { name: "", value: "" };
-        const loading = busyTarget === `pending:${id}`;
-        const nextName = draft.name.trim();
-        const canConfirm = NAME_OK2.test(nextName) && draft.value !== "" && !taken.has(nextName);
-        const selected = selectedIds.has(id);
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "div",
-          {
-            className: EnvSettingsSection_default.row,
-            "data-env-row": id,
-            "data-selected": selected ? "true" : "false",
-            "aria-selected": selected,
-            onMouseDown: (event) => {
-              onRowMouseDown(id, event);
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                Field,
-                {
-                  id: `env-name-${id}`,
-                  value: draft.name,
-                  disabled: busy,
-                  title: draft.name,
-                  invalid: nameError,
-                  label: t("field.name"),
-                  rowSelectGestures: true,
-                  onChange: (name) => {
-                    setNameError(false);
-                    setDraft(id, { name });
-                  }
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                Field,
-                {
-                  id: `env-value-${id}`,
-                  value: draft.value,
-                  disabled: busy,
-                  title: draft.value,
-                  label: t("field.value"),
-                  rowSelectGestures: true,
-                  onChange: (value) => {
-                    setDraft(id, { value });
-                  }
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                RowActions,
-                {
-                  t,
-                  busy,
-                  loading,
-                  dirty: true,
-                  canConfirm,
-                  showRemove: false,
-                  onConfirm: () => {
-                    savePending(id);
-                  },
-                  onCancel: () => {
-                    setNameError(false);
-                    dropPending(id);
-                  },
-                  onRestore: () => void 0,
-                  onRemove: () => void 0
-                }
-              )
-            ]
-          },
-          id
-        );
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: EnvSettingsSection_default.row, "data-composer": "true", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          Field,
-          {
-            id: "env-new-name",
-            value: composer.name,
-            disabled: busy,
-            placeholder: t("field.namePlaceholder"),
-            title: composer.name || t("field.namePlaceholder"),
-            label: t("field.name"),
-            onChange: (name) => {
-              typeIntoComposer({ name }, "name");
-            },
-            onPaste: onComposerPaste
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          Field,
-          {
-            id: "env-new-value",
-            value: composer.value,
-            disabled: busy,
-            placeholder: t("field.valuePlaceholder"),
-            title: composer.value || t("field.valuePlaceholder"),
-            label: t("field.value"),
-            onChange: (value) => {
-              typeIntoComposer({ value }, "value");
-            },
-            onPaste: onComposerPaste
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: EnvSettingsSection_default.actions, "aria-hidden": "true" })
-      ] })
-    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: EnvSettingsSection_default.groups, children: groups.map((group) => {
+      const expanded = openGroups[group.id] === true;
+      const groupEntries = grouped.saved.get(group.id) ?? [];
+      const groupPending = grouped.pending.get(group.id) ?? [];
+      const isDefault = group.id === DEFAULT_GROUP_ID;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: EnvSettingsSection_default.group, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: EnvSettingsSection_default.groupTitleRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "button",
+            {
+              type: "button",
+              className: EnvSettingsSection_default.groupToggle,
+              "aria-expanded": expanded,
+              onClick: () => {
+                setOpenGroups((previous) => ({ ...previous, [group.id]: !expanded }));
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dsh_client_ui_primitives.IconChevronDownOutlineRegular, { className: EnvSettingsSection_default.chevron, size: 12, "aria-hidden": "true" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: EnvSettingsSection_default.groupTitle, children: groupLabel(group) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: EnvSettingsSection_default.headerEnd, children: isDefault ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            IconAction,
+            {
+              label: t("action.createGroup"),
+              disabled: busy,
+              onClick: () => {
+                setGroupTitleDraft("");
+                setGroupModal({ kind: "create" });
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dsh_client_ui_primitives.IconPlusOutlineRegular, { size: 14 })
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              IconAction,
+              {
+                label: t("action.renameGroup"),
+                disabled: busy,
+                onClick: () => {
+                  setGroupTitleDraft(group.title);
+                  setGroupModal({ kind: "rename", id: group.id, title: group.title });
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dsh_client_ui_primitives.IconEditOutlineRegular, { size: 14 })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              IconAction,
+              {
+                label: t("action.deleteGroup"),
+                danger: true,
+                disabled: busy,
+                onClick: () => {
+                  setGroupModal({
+                    kind: "delete",
+                    id: group.id,
+                    title: group.title,
+                    moveToDefault: true
+                  });
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dsh_client_ui_primitives.IconTrashOutlineRegular, { size: 14 })
+              }
+            )
+          ] }) })
+        ] }),
+        expanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: EnvSettingsSection_default.groupBody, children: [
+          isDefault ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: EnvSettingsSection_default.header, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: EnvSettingsSection_default.headerLabel, children: t("field.name") }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: EnvSettingsSection_default.headerLabel, children: t("field.value") }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: EnvSettingsSection_default.headerActions, "aria-hidden": "true" })
+          ] }) : null,
+          groupEntries.map((entry) => renderRow(entry)),
+          groupPending.map((id) => renderPending(id, group.id)),
+          renderComposer(group.id)
+        ] }) : null
+      ] }, group.id);
+    }) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_dsh_client_ui_primitives.Modal,
       {
@@ -1318,6 +1514,60 @@ function EnvSettingsSection({
           )
         ] })
       }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_dsh_client_ui_primitives.Modal,
+      {
+        open: groupModal !== void 0,
+        onClose: () => {
+          if (!busy) setGroupModal(void 0);
+        },
+        title: groupModal?.kind === "create" ? t("action.createGroup") : groupModal?.kind === "rename" ? t("action.renameGroup") : t("action.deleteGroupTitle"),
+        closeLabel: t("action.close"),
+        description: groupModal?.kind === "delete" ? t("action.deleteGroupConfirm", { title: groupModal.title }) : void 0,
+        footer: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dsh_client_ui_primitives.Button, { variant: "outline", disabled: busy, onClick: () => {
+            setGroupModal(void 0);
+          }, children: t("action.cancel") }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_dsh_client_ui_primitives.Button,
+            {
+              variant: "primary",
+              disabled: busy || (groupModal?.kind === "create" || groupModal?.kind === "rename") && groupTitleDraft.trim() === "",
+              onClick: () => {
+                submitGroupModal();
+              },
+              children: groupModal?.kind === "delete" ? t("action.deleteGroup") : t("action.confirm")
+            }
+          )
+        ] }),
+        children: [
+          groupModal?.kind === "create" || groupModal?.kind === "rename" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: EnvSettingsSection_default.modalField, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_dsh_client_ui_primitives.Input,
+            {
+              value: groupTitleDraft,
+              placeholder: t("action.groupTitlePlaceholder"),
+              "aria-label": t("action.groupTitle"),
+              disabled: busy,
+              onChange: (event) => {
+                setGroupTitleDraft(event.target.value);
+              }
+            }
+          ) }) : null,
+          groupModal?.kind === "delete" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_dsh_client_ui_primitives.Checkbox,
+            {
+              className: EnvSettingsSection_default.modalCheck,
+              checked: groupModal.moveToDefault,
+              disabled: busy,
+              label: t("action.deleteGroupMove"),
+              onChange: (checked) => {
+                setGroupModal({ ...groupModal, moveToDefault: checked });
+              }
+            }
+          ) : null
+        ]
+      }
     )
   ] });
 }
@@ -1327,7 +1577,6 @@ var NS = "settings.env";
 var zh = {
   "panel.nav": "\u73AF\u5883\u53D8\u91CF",
   "panel.title": "\u73AF\u5883\u53D8\u91CF",
-  "panel.empty": "\u6682\u65E0\u53D8\u91CF",
   "panel.loading": "\u52A0\u8F7D\u4E2D\u2026",
   "field.name": "\u540D\u79F0",
   "field.value": "\u503C",
@@ -1341,6 +1590,16 @@ var zh = {
   "action.removeConfirm": "\u5220\u9664 {name}\uFF1F",
   "action.restore": "\u6062\u590D\u539F\u503C",
   "action.close": "\u5173\u95ED",
+  "action.moveGroup": "\u4FEE\u6539\u5206\u7EC4",
+  "action.createGroup": "\u65B0\u5EFA\u5206\u7EC4",
+  "action.renameGroup": "\u91CD\u547D\u540D\u5206\u7EC4",
+  "action.deleteGroup": "\u5220\u9664\u5206\u7EC4",
+  "action.deleteGroupTitle": "\u5220\u9664\u5206\u7EC4",
+  "action.deleteGroupConfirm": "\u5220\u9664\u5206\u7EC4\u300C{title}\u300D\uFF1F",
+  "action.deleteGroupMove": "\u53D8\u91CF\u79FB\u5165\u9ED8\u8BA4\u5206\u7EC4",
+  "action.groupTitle": "\u5206\u7EC4\u540D\u79F0",
+  "action.groupTitlePlaceholder": "\u5206\u7EC4\u540D\u79F0",
+  "group.defaultTitle": "\u9ED8\u8BA4\u5206\u7EC4",
   "status.restartRequired": "\u9700\u91CD\u542F\u5BA2\u6237\u7AEF",
   "cli.title": "dsh",
   "cli.activeMissing": "\u672A\u627E\u5230",
@@ -1349,6 +1608,7 @@ var zh = {
   "error.generic": "\u66F4\u65B0\u5931\u8D25",
   "error.invalidName": "\u540D\u79F0\u65E0\u6548",
   "error.invalidValue": "\u503C\u65E0\u6548",
+  "error.invalidGroup": "\u5206\u7EC4\u65E0\u6548",
   "error.restoreFailed": "\u6062\u590D\u5931\u8D25",
   "error.cliInstall": "\u5B89\u88C5\u5931\u8D25",
   "error.cliUnresolved": "\u65E0\u6CD5\u5B89\u88C5",
@@ -1357,7 +1617,6 @@ var zh = {
 var en = {
   "panel.nav": "Environment",
   "panel.title": "Environment",
-  "panel.empty": "No variables",
   "panel.loading": "Loading\u2026",
   "field.name": "Name",
   "field.value": "Value",
@@ -1371,6 +1630,16 @@ var en = {
   "action.removeConfirm": "Delete {name}?",
   "action.restore": "Restore original",
   "action.close": "Close",
+  "action.moveGroup": "Move to group",
+  "action.createGroup": "New group",
+  "action.renameGroup": "Rename group",
+  "action.deleteGroup": "Delete group",
+  "action.deleteGroupTitle": "Delete group",
+  "action.deleteGroupConfirm": 'Delete group "{title}"?',
+  "action.deleteGroupMove": "Move variables into Default",
+  "action.groupTitle": "Group name",
+  "action.groupTitlePlaceholder": "Group name",
+  "group.defaultTitle": "Default",
   "status.restartRequired": "Restart the client",
   "cli.title": "dsh",
   "cli.activeMissing": "Not found",
@@ -1379,6 +1648,7 @@ var en = {
   "error.generic": "Update failed",
   "error.invalidName": "Invalid name",
   "error.invalidValue": "Invalid value",
+  "error.invalidGroup": "Invalid group",
   "error.restoreFailed": "Restore failed",
   "error.cliInstall": "Install failed",
   "error.cliUnresolved": "Install unavailable",
@@ -1402,9 +1672,13 @@ function registerUi(ctx) {
     locale: NS,
     inject: () => ({
       load: async () => call(await ctx.remote.customEnv.list()),
-      upsert: async (id, name, value) => call(await ctx.remote.customEnv.upsert(id, name, value)),
+      upsert: async (id, name, value, groupId) => call(await ctx.remote.customEnv.upsert(id, name, value, groupId)),
       remove: async (id) => call(await ctx.remote.customEnv.deleteEntry(id)),
       restore: async (id) => call(await ctx.remote.customEnv.restore(id)),
+      moveEntry: async (id, groupId) => call(await ctx.remote.customEnv.moveEntry(id, groupId)),
+      createGroup: async (title) => call(await ctx.remote.customEnv.createGroup(title)),
+      renameGroup: async (id, title) => call(await ctx.remote.customEnv.renameGroup(id, title)),
+      deleteGroup: async (id, moveToDefault) => call(await ctx.remote.customEnv.deleteGroup(id, { moveToDefault })),
       cliStatus: async () => call(await ctx.remote.customEnv.cliStatus()),
       cliInstall: async () => call(await ctx.remote.customEnv.cliInstall())
     })