@bhooai/nexus-graphql 2.0.12 → 2.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bhooai/nexus-graphql",
-    "version": "2.0.12",
+    "version": "2.0.16",
     "publishConfig": {
         "access": "public"
     },

package/src/explorer/explorerHtml.ts

@@ -52,7 +52,21 @@ const AURORA_CSS = `.agent-shell { display:flex; flex-direction:column; height:1
 .agent-brand-name { color:#f1f8ff; font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-size:.8rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
 .agent-brand-name em { color:#63bdff; font-style:normal; text-shadow:0 0 18px rgba(84,183,255,.5); }
 .agent-brand-sub { color:#4f6b8c; font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-size:.55rem; letter-spacing:.14em; text-transform:uppercase; }
-.agent-spacer { flex:1; }
+.agent-spacer { flex:1; }
+
+/* ── Unified tooltip — single style for every [data-tip] element on the page ── */
+[data-tip]{ position:relative; }
+[data-tip]::after{ position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%) translateY(2px); z-index:120; padding:.35rem .6rem; border:1px solid rgba(112,168,228,.28); border-radius:.45rem; background:linear-gradient(160deg, rgba(10,28,55,.97), rgba(6,16,36,.98)); color:#dcecff; font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-size:.56rem; font-weight:600; letter-spacing:.03em; line-height:1.4; white-space:nowrap; content:attr(data-tip); opacity:0; visibility:hidden; pointer-events:none; box-shadow:0 12px 32px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.06); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); transition:opacity .16s ease, transform .16s ease, visibility .16s; }
+[data-tip]::before{ position:absolute; left:50%; bottom:calc(100% + 4px); transform:translateX(-50%) rotate(45deg); z-index:119; width:.5rem; height:.5rem; border-right:1px solid rgba(112,168,228,.28); border-bottom:1px solid rgba(112,168,228,.28); background:rgba(10,28,55,.98); content:""; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .16s ease, visibility .16s; }
+[data-tip]:hover::after, [data-tip]:hover::before,
+[data-tip]:focus-visible::after, [data-tip]:focus-visible::before{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
+[data-tip]:hover::before, [data-tip]:focus-visible::before{ transform:translateX(-50%) rotate(45deg); }
+/* Tooltip below for elements near the top edge (e.g. header buttons). */
+[data-tip="bottom"]::after, [data-tip-bottom]::after{ bottom:auto; top:calc(100% + 8px); transform:translateX(-50%) translateY(-2px); }
+[data-tip="bottom"]::before, [data-tip-bottom]::before{ bottom:auto; top:calc(100% + 4px); transform:translateX(-50%) rotate(45deg); }
+[data-tip="bottom"]:hover::after, [data-tip-bottom]:hover::after{ transform:translateX(-50%) translateY(0); }
+[data-theme="light"] [data-tip]::after{ background:linear-gradient(160deg, rgba(255,255,255,.98), rgba(238,245,255,.98)); color:#0b1220; border-color:rgba(60,110,180,.24); box-shadow:0 12px 32px rgba(20,50,100,.16), inset 0 1px rgba(255,255,255,.7); }
+[data-theme="light"] [data-tip]::before{ background:#f2f7ff; border-color:rgba(60,110,180,.24); }
 .agent-status { display:inline-flex; align-items:center; gap:.42rem; padding:.4rem .7rem; border:1px solid rgba(52,211,153,.32); border-radius:999px; background:rgba(16,185,129,.12); color:#7ee8bd; font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-size:.58rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
 .agent-status-dot { width:.42rem; height:.42rem; border-radius:50%; background:#5ef0b3; box-shadow:0 0 10px rgba(94,240,179,.9); animation:agent-pulse 2.4s ease-in-out infinite; }
 .agent-select-wrap { display:inline-flex; align-items:center; gap:.42rem; padding:.22rem .3rem .22rem .6rem; border:1px solid rgba(112,168,228,.2); border-radius:.6rem; background:rgba(20,46,79,.3); transition:border-color .14s, background .14s, box-shadow .14s; }
@@ -380,7 +394,28 @@ const AURORA_CSS = `.agent-shell { display:flex; flex-direction:column; height:1
 .agent-dots i:nth-child(3) { animation-delay:.32s; }
 @keyframes agent-bounce { 0%,60%,100% { transform:translateY(0); opacity:.5; } 30% { transform:translateY(-4px); opacity:1; } }
 
-.agent-toast { position:fixed; top:4.5rem; right:1.5rem; z-index:60; padding:.6rem .9rem; border:1px solid rgba(84,183,255,.35); border-radius:.6rem; color:#dcecff; background:linear-gradient(160deg, rgba(16,38,70,.85), rgba(8,20,42,.9)); box-shadow:0 14px 40px rgba(0,0,0,.4); backdrop-filter:blur(20px) saturate(140%); font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-size:.68rem; animation:agent-open .22s cubic-bezier(.22,1,.36,1); }
+.agent-toast { position:fixed; top:4.5rem; right:1.5rem; z-index:60; padding:.6rem .9rem; border:1px solid rgba(84,183,255,.35); border-radius:.6rem; color:#dcecff; background:linear-gradient(160deg, rgba(16,38,70,.85), rgba(8,20,42,.9)); box-shadow:0 14px 40px rgba(0,0,0,.4); backdrop-filter:blur(20px) saturate(140%); font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-size:.68rem; animation:agent-open .22s cubic-bezier(.22,1,.36,1); }
+
+/* ── Alert toast (top-right) — success / error / info states ── */
+.agent-alert { position:fixed; top:4.2rem; right:1.25rem; z-index:200; display:none; align-items:flex-start; gap:.6rem; max-width:340px; padding:.65rem .8rem; border:1px solid rgba(84,183,255,.35); border-radius:.7rem; color:#dcecff; background:linear-gradient(160deg, rgba(16,38,70,.94), rgba(8,20,42,.97)); box-shadow:0 14px 44px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.06); backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%); font-family:ui-monospace, SFMono-Regular, Consolas, monospace; }
+.agent-alert.show { display:flex; animation:agent-rise .24s cubic-bezier(.22,1,.36,1); }
+.agent-alert-mark { flex:0 0 auto; display:grid; place-items:center; width:1.5rem; height:1.5rem; border-radius:.45rem; color:#6df0bb; font-size:.85rem; font-weight:800; border:1px solid rgba(52,211,153,.45); background:linear-gradient(135deg, rgba(16,185,129,.3), rgba(6,95,70,.22)); box-shadow:0 0 12px rgba(52,211,153,.25); }
+.agent-alert-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:.15rem; }
+.agent-alert-title { color:#7ee8bd; font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
+.agent-alert-msg { color:#cfe3fb; font-size:.64rem; line-height:1.5; word-break:break-word; }
+.agent-alert-close { flex:0 0 auto; display:grid; place-items:center; width:1.2rem; height:1.2rem; border:0; border-radius:.35rem; color:#7d94b2; background:transparent; font-size:.9rem; line-height:1; cursor:pointer; transition:color .12s, background .12s; }
+.agent-alert-close:hover { color:#fecdd3; background:rgba(244,63,94,.16); }
+.agent-alert.hide { display:none; }
+/* Error state */
+.agent-alert.is-error { border-color:rgba(251,113,133,.5); }
+.agent-alert.is-error .agent-alert-mark { color:#fda4af; border-color:rgba(251,113,133,.5); background:linear-gradient(135deg, rgba(244,63,94,.3), rgba(159,18,57,.22)); box-shadow:0 0 12px rgba(244,63,94,.28); }
+.agent-alert.is-error .agent-alert-title { color:#fda4af; }
+.agent-alert.is-error .agent-alert-msg { color:#fecdd3; }
+/* Info state */
+.agent-alert.is-info { border-color:rgba(84,183,255,.5); }
+.agent-alert.is-info .agent-alert-mark { color:#8ed6ff; border-color:rgba(84,183,255,.5); background:linear-gradient(135deg, rgba(38,130,225,.3), rgba(90,67,183,.24)); box-shadow:0 0 12px rgba(84,183,255,.28); }
+.agent-alert.is-info .agent-alert-title { color:#8ed6ff; }
+.agent-alert.is-info .agent-alert-msg { color:#cfe3fb; }
 .agent-scroll-down { position:fixed; right:1.6rem; bottom:6.5rem; z-index:55; display:grid; place-items:center; width:2.5rem; height:2.5rem; border:1px solid rgba(84,183,255,.4); border-radius:50%; color:#bfe9ff; background:linear-gradient(160deg, rgba(16,38,70,.85), rgba(8,20,42,.9)); box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 16px rgba(84,183,255,.2); backdrop-filter:blur(18px); font-size:1rem; cursor:pointer; transition:transform .14s, filter .14s; animation:agent-rise .2s cubic-bezier(.22,1,.36,1) both; }
 .agent-scroll-down:hover { filter:brightness(1.15); transform:translateY(-2px); }
 .agent-scroll-down:active { transform:scale(.92); }
@@ -747,14 +782,6 @@ export function getExplorerHtml(opts: ExplorerOptions = {}): string {
     .graphiql-container .graphiql-history-item { color:#cfe3fb; border-color: rgba(112,168,228,.14); background: rgba(8,25,48,.55); }
     .graphiql-container .graphiql-history-item:hover { background: rgba(84,183,255,.1); }
     .graphiql-container .graphiql-history-header { color: #5f7b9c; border-color: rgba(112,168,228,.14); }
-    /* History button in GraphiQL sidebar */
-    .graphiql-container .graphiql-history-btn { 
-      position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
-      background: none; border: none; color: #6e8aaa; cursor: pointer; padding: 4px 8px;
-      border-radius: .4rem; font-size: .7rem; transition: color .14s, background .14s;
-    }
-    .graphiql-container .graphiql-history-btn:hover { color: #dcecff; background: rgba(84,183,255,.12); }
-    .graphiql-container .graphiql-history-btn.active { color: #8ed6ff; background: rgba(84,183,255,.16); box-shadow: 0 0 8px rgba(84,183,255,.25); }
     /* dropdown menus + buttons */
     .graphiql-container .graphiql-dropdown-content { background: linear-gradient(160deg, rgba(12,34,64,.97), rgba(6,16,36,.98)); border:1px solid rgba(99,189,255,.3); box-shadow: 0 16px 40px rgba(0,0,0,.5); }
     .graphiql-container .graphiql-dropdown-item { color: #cfe3fb; }
@@ -802,11 +829,16 @@ export function getExplorerHtml(opts: ExplorerOptions = {}): string {
     .graphiql-container .graphiql-execute-button:hover { filter:brightness(1.15); }
     /* dialogs + tooltips + autocomplete */
     .graphiql-dialog, .graphiql-dialog-overlay { background:rgba(2,8,20,.62); }
-    .graphiql-dialog-container { background:linear-gradient(160deg, rgba(12,34,64,.96), rgba(6,16,36,.98)) !important; border:1px solid rgba(99,189,255,.28); box-shadow:0 30px 90px rgba(0,0,0,.6); backdrop-filter:blur(22px); }
+    .graphiql-dialog-container { background:linear-gradient(160deg, rgba(23,55,96,.97), rgba(14,32,62,.98)) !important; border:1px solid rgba(99,189,255,.4); box-shadow:0 30px 90px rgba(0,0,0,.55); backdrop-filter:blur(22px); }
+    .graphiql-dialog-close { display:grid; place-items:center; width:1.9rem; height:1.9rem; border:1px solid rgba(251,113,133,.55); border-radius:.55rem; background:linear-gradient(135deg, rgba(244,63,94,.85), rgba(159,18,57,.8)); color:#fff !important; cursor:pointer; box-shadow:0 6px 18px rgba(244,63,94,.4); transition:filter .14s, transform .14s, box-shadow .14s; }
+    .graphiql-dialog-close:hover { filter:brightness(1.15); transform:rotate(90deg); box-shadow:0 8px 22px rgba(244,63,94,.55); }
+    .graphiql-dialog-close svg { fill:none; stroke:currentColor; stroke-width:2; }
+    .graphiql-dialog-title { color:#bfe9ff; font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
+    .graphiql-dialog-section-title { color:#bfe9ff; font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
     .graphiql-container .CodeMirror-hints { background:linear-gradient(160deg, rgba(12,34,64,.97), rgba(6,16,36,.98)); border:1px solid rgba(99,189,255,.3); box-shadow:0 16px 40px rgba(0,0,0,.5); }
     .graphiql-container .CodeMirror-hint { color:#cfe3fb; }
     .graphiql-container .CodeMirror-hint-active { background:rgba(84,183,255,.22); color:#fff; }
-    .graphiql-tooltip { background:linear-gradient(160deg, rgba(12,34,64,.96), rgba(6,16,36,.98)); color:#dcecff; border:1px solid rgba(99,189,255,.3); }
+    .graphiql-tooltip { background:linear-gradient(160deg, rgba(10,28,55,.97), rgba(6,16,36,.98)); color:#dcecff; border:1px solid rgba(112,168,228,.28); border-radius:.45rem; font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-size:.56rem; font-weight:600; letter-spacing:.03em; line-height:1.4; padding:.35rem .6rem; box-shadow:0 12px 32px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.06); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); }
     /* GraphiQL variables/editor inputs */
     .graphiql-container input[type=text], .graphiql-container input[type=search], .graphiql-container textarea { background:rgba(255,255,255,.05); border-color:rgba(112,168,228,.24); color:#e8f2ff; }
     .graphiql-container input:focus, .graphiql-container textarea:focus { border-color:rgba(84,183,255,.6); box-shadow:0 0 0 3px rgba(84,183,255,.14); }
@@ -822,6 +854,10 @@ export function getExplorerHtml(opts: ExplorerOptions = {}): string {
       --popover-box-shadow: 0 14px 40px rgba(20,50,100,.14);
       --popover-border: 1px solid rgba(60,110,180,.18);
     }
+    [data-theme="light"] .graphiql-tooltip { background:linear-gradient(160deg, rgba(255,255,255,.98), rgba(238,245,255,.98)); color:#0b1220; border-color:rgba(60,110,180,.24); box-shadow:0 12px 32px rgba(20,50,100,.16), inset 0 1px rgba(255,255,255,.7); }
+    [data-theme="light"] .graphiql-dialog-close { color:#fff !important; border-color:rgba(225,29,72,.55); background:linear-gradient(135deg, rgba(225,29,72,.85), rgba(159,18,57,.8)); box-shadow:0 6px 18px rgba(225,29,72,.35); }
+    [data-theme="light"] .graphiql-dialog-close:hover { filter:brightness(1.12); }
+    [data-theme="light"] .graphiql-dialog-title, [data-theme="light"] .graphiql-dialog-section-title { color:#1d6fd0; }
     [data-theme="light"] .graphiql-container .graphiql-editors { background: rgba(255,255,255,.72); border-color: rgba(60,110,180,.16); box-shadow: inset 0 1px rgba(255,255,255,.6), 0 18px 50px rgba(20,50,100,.1); }
     [data-theme="light"] .graphiql-container .graphiql-sidebar { background: rgba(255,255,255,.6); border-right-color: rgba(60,110,180,.14); }
     [data-theme="light"] .graphiql-container .graphiql-toolbar { background: rgba(255,255,255,.55); border-right-color: rgba(60,110,180,.12); }
@@ -844,8 +880,14 @@ export function getExplorerHtml(opts: ExplorerOptions = {}): string {
     [data-theme="light"] .graphiql-container input[type=text], [data-theme="light"] .graphiql-container textarea { background:rgba(255,255,255,.9); color:#16233c; border-color:rgba(60,110,180,.2); }
     /* ── explorer-specific glass (reuses agent tokens) ── */
     .graphiql-panel { display:flex; flex-direction:column; min-width:0; min-height:0; border:1px solid rgba(112,168,228,.18); border-radius:.9rem; background:linear-gradient(160deg, rgba(16,38,70,.45), rgba(8,20,42,.5)); box-shadow:inset 0 1px rgba(255,255,255,.05), 0 18px 50px rgba(0,0,0,.24); backdrop-filter:blur(18px) saturate(135%); -webkit-backdrop-filter:blur(18px) saturate(135%); overflow:hidden; animation:agent-rise .3s cubic-bezier(.22,1,.36,1) both; }
-    #graphiql{flex:1; min-height:0}
-    .graphiql-container{height:100% !important}
+    #graphiql{flex:1; min-height:0; min-width:0; overflow:hidden}
+    .graphiql-container{height:100% !important; width:100%; min-width:0; overflow:hidden}
+    .graphiql-container .graphiql-editors{min-width:0}
+    /* Hide GraphiQL/CodeMirror off-screen measurement nodes (left:-1000px) that
+       bleed over the sidebar and block the History toggle button. */
+    #graphiql [style*="left: -1000px"], #graphiql [style*="left:-1000px"],
+    #graphiql .CodeMirror-measure, #graphiql .CodeMirror-measure *{pointer-events:none !important}
+    #graphiql [style*="left: -1000px"], #graphiql [style*="left:-1000px"]{visibility:hidden !important}
     .panel-head{padding:.6rem .85rem; font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; color:#5f7b9c; border-bottom:1px solid rgba(112,168,228,.12); display:flex; justify-content:space-between; align-items:center; font-family:ui-monospace, SFMono-Regular, Consolas, monospace}
     .ai-hint{font-size:.6rem; color:#5f7b9c; font-family:ui-monospace, SFMono-Regular, Consolas, monospace}
     .ops{padding:.6rem .7rem; display:flex; flex-direction:column; gap:.4rem}
@@ -854,21 +896,45 @@ export function getExplorerHtml(opts: ExplorerOptions = {}): string {
     .ops .op b{font-size:.66rem; color:#dcecff; font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-weight:600}
     .ops .op > span{font-size:.52rem; padding:.14rem .45rem; border-radius:999px; background:rgba(84,183,255,.15); color:#8ed6ff; border:1px solid rgba(84,183,255,.25); font-weight:700; letter-spacing:.06em; text-transform:uppercase; flex:0 0 auto}
     .ops .op.mutation > span{background:rgba(243,110,184,.15); color:#fda4c7; border-color:rgba(243,110,184,.25)}
-    .history{padding:.5rem .7rem; border-top:1px solid rgba(112,168,228,.12); max-height:9rem; overflow:auto}
-    .history div{font-size:.6rem; padding:.35rem .5rem; border-radius:.45rem; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#9fb3d0; font-family:ui-monospace, SFMono-Regular, Consolas, monospace}
-    .history div:hover{background:rgba(84,183,255,.1)}
+    .history{padding:.5rem .7rem; border-top:1px solid rgba(112,168,228,.12); max-height:9rem; overflow:auto}
+    .history div{font-size:.6rem; padding:.35rem .5rem; border-radius:.45rem; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#9fb3d0; font-family:ui-monospace, SFMono-Regular, Consolas, monospace}
+    .history div:hover{background:rgba(84,183,255,.1)}
+    .graphiql-history-clear{border:0; background:transparent; color:#5f7b9c; font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-size:.56rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; padding:.1rem .3rem; border-radius:.35rem; transition:color .12s, background .12s}
+    .graphiql-history-clear:hover{color:#fda4af; background:rgba(244,63,94,.12)}
+    .panel-head-actions{display:inline-flex; align-items:center; gap:.25rem}
+    .graphiql-history-btn{border:1px solid rgba(112,168,228,.22); background:rgba(84,183,255,.08); color:#8fb8e4; font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-size:.56rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; padding:.12rem .4rem; border-radius:.4rem; transition:color .12s, border-color .12s, background .12s}
+    .graphiql-history-btn:hover{color:#bfe9ff; border-color:rgba(84,183,255,.55); background:rgba(84,183,255,.16)}
+    .graphiql-history-btn.active{color:#8ed6ff; border-color:rgba(84,183,255,.6); background:rgba(84,183,255,.2); box-shadow:0 0 8px rgba(84,183,255,.25)}
     /* Type details */
-    .type-details{padding:0 .7rem .6rem; display:flex; flex-direction:column; gap:.4rem; max-height:22rem; overflow:auto}
-    .type-details details{border:1px solid rgba(112,168,228,.18); border-radius:.6rem; background:linear-gradient(160deg, rgba(16,38,70,.4), rgba(8,20,42,.5)); overflow:hidden; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
-    .type-details summary{cursor:pointer; padding:.5rem .65rem; list-style:none; display:flex; justify-content:space-between; align-items:center; font-size:.66rem; color:#dcecff; font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-weight:700}
-    .type-details summary::-webkit-details-marker{display:none}
-    .type-details summary:hover{background:rgba(84,183,255,.07)}
-    .type-details .type-kind{font-size:.5rem; padding:.12rem .4rem; border-radius:999px; background:rgba(159,123,255,.15); color:#c4b5fd; border:1px solid rgba(139,92,246,.3); font-weight:800; letter-spacing:.08em; text-transform:uppercase}
-    .type-details .type-fields{padding:0 .6rem .5rem; display:flex; flex-direction:column; gap:.28rem}
-    .type-details .type-field{font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-size:.6rem; padding:.32rem .5rem; border-radius:.45rem; background:rgba(0,0,0,.28); color:#a6bfd8; display:flex; justify-content:space-between; gap:.5rem; border:1px solid rgba(112,168,228,.08)}
-    .type-details .type-field b{color:#8ed6ff; font-weight:600}
-    .type-details .type-field .hljs{background:transparent; padding:0}
-    .type-details .type-desc{font-size:.58rem; color:#5f7b9c; padding:0 .65rem .5rem; line-height:1.5}
+    .type-details{padding:0 .7rem .7rem; display:flex; flex-direction:column; gap:.5rem; min-width:0}
+    .type-details details{border:1px solid rgba(112,168,228,.17); border-radius:.55rem; background:rgba(8,25,48,.6); box-shadow:inset 0 1px rgba(255,255,255,.04); overflow:hidden; transition:border-color .14s, background .14s, transform .14s}
+    .type-details details:hover{border-color:rgba(84,183,255,.5); background:rgba(84,183,255,.1); transform:translateY(-1px)}
+    .type-details summary{cursor:pointer; padding:.5rem .65rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:.6rem; font-size:.66rem; color:#dcecff; font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-weight:700; transition:background .14s}
+    .type-details summary::-webkit-details-marker{display:none}
+    .type-details summary:hover{background:rgba(84,183,255,.1)}
+    .type-details summary .type-name{min-width:0; display:inline-flex; align-items:center; gap:.45rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
+    .type-details summary .type-name b{overflow:hidden; text-overflow:ellipsis}
+    .type-details .type-icon{flex:0 0 auto; display:grid; place-items:center; width:1.25rem; height:1.25rem; border-radius:.4rem; font-size:.55rem; font-weight:800; letter-spacing:.04em; border:1px solid rgba(84,183,255,.35); background:linear-gradient(135deg, rgba(38,130,225,.3), rgba(90,67,183,.26)); color:#9fd4ff; box-shadow:0 0 10px rgba(84,183,255,.18)}
+    .type-details .type-icon.kind-input{color:#c4b5fd; border-color:rgba(139,92,246,.4); background:linear-gradient(135deg, rgba(124,58,237,.3), rgba(90,67,183,.26))}
+    .type-details .type-icon.kind-enum{color:#ffd479; border-color:rgba(245,158,11,.4); background:linear-gradient(135deg, rgba(245,158,11,.26), rgba(180,83,9,.2))}
+    .type-details .type-icon.kind-scalar{color:#6df0bb; border-color:rgba(52,211,153,.4); background:linear-gradient(135deg, rgba(16,185,129,.26), rgba(6,95,70,.2))}
+    .type-details .type-kind{flex:0 0 auto; font-size:.5rem; padding:.12rem .4rem; border-radius:999px; background:rgba(159,123,255,.15); color:#c4b5fd; border:1px solid rgba(139,92,246,.3); font-weight:800; letter-spacing:.08em; text-transform:uppercase}
+    .type-details .type-chevron{flex:0 0 auto; display:grid; place-items:center; width:1.1rem; height:1.1rem; border-radius:.35rem; color:#5f7b9c; font-size:.6rem; transition:transform .18s, color .14s, background .14s}
+    .type-details summary:hover .type-chevron{color:#9fd4ff; background:rgba(84,183,255,.14)}
+    .type-details details[open] .type-chevron{transform:rotate(90deg)}
+    .type-details .type-body{padding:.6rem .7rem .7rem .85rem; display:flex; flex-direction:column; gap:.5rem}
+    .type-details .type-desc{margin:0; font-size:.58rem; color:#5f7b9c; line-height:1.55; padding:.35rem .6rem; border-radius:.45rem; background:rgba(84,183,255,.05); border-left:2px solid rgba(84,183,255,.3)}
+    .type-details .type-subhead{font-size:.5rem; letter-spacing:.13em; text-transform:uppercase; color:#5f7b9c; font-weight:800; padding-left:.15rem}
+    .type-details .type-fields{display:flex; flex-direction:column; gap:.4rem; min-width:0}
+    .type-details .type-field{font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-size:.6rem; padding:.34rem .55rem; border-radius:.45rem; background:rgba(8,25,48,.6); color:#dcecff; display:flex; justify-content:space-between; align-items:center; gap:.5rem; min-width:0; border:1px solid rgba(112,168,228,.17); box-shadow:inset 0 1px rgba(255,255,255,.04); transition:border-color .14s, transform .14s, background .14s}
+    .type-details .type-field:hover{border-color:rgba(84,183,255,.5); transform:translateY(-1px); background:rgba(84,183,255,.1)}
+    .type-details .type-field > span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
+    .type-details .type-field code.hljs{display:inline; background:transparent; padding:0; color:#e8f2ff; white-space:nowrap}
+    .type-details .type-field b{color:#8ed6ff; font-weight:600}
+    .type-details .type-field .tok-arg{color:#ffd479}
+    .type-details .type-field .tok-type{color:#c4b5fd}
+    .type-details .type-field-arrow{flex:0 0 auto; display:inline-flex; align-items:center; gap:.28rem; font-size:.54rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#9fd4ff; cursor:pointer; padding:.22rem .45rem; border-radius:.4rem; border:1px solid rgba(84,183,255,.35); background:rgba(84,183,255,.1); transition:border-color .12s, background .12s, color .12s, transform .12s}
+    .type-details .type-field-arrow:hover{color:#eaf7ff; border-color:rgba(84,183,255,.65); background:rgba(40,137,235,.24); transform:translateX(2px)}
     .type-filter{margin:.45rem .7rem 0; padding:.42rem .6rem; border-radius:.5rem; border:1px solid rgba(112,168,228,.22); background:rgba(20,46,79,.32); color:#e5f4ff; font-size:.62rem; width:calc(100% - 1.4rem); outline:none; transition:border-color .14s, box-shadow .14s}
     .type-filter::placeholder{color:#536c8c}
     .type-filter:focus{border-color:rgba(84,183,255,.55); box-shadow:0 0 0 2px rgba(84,183,255,.15)}
@@ -887,8 +953,8 @@ export function getExplorerHtml(opts: ExplorerOptions = {}): string {
     .ai-chat .msg.ai{align-self:flex-start; align-items:flex-start}
     .ai-chat .bubble{padding:.6rem .8rem; border:1px solid rgba(112,168,228,.22); border-radius:.8rem; color:#dcecff; background:linear-gradient(160deg, rgba(16,38,70,.5), rgba(8,20,42,.56)); font-size:.78rem; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; box-shadow:inset 0 1px rgba(255,255,255,.05), 0 14px 42px rgba(0,0,0,.2); backdrop-filter:blur(18px) saturate(135%); -webkit-backdrop-filter:blur(18px) saturate(135%)}
     .ai-chat .user .bubble{border-color:rgba(84,183,255,.42); background:linear-gradient(160deg, rgba(22,70,122,.58), rgba(46,41,112,.5)); color:#eaf7ff}
-    .ai-chat .bubble pre{margin:.4rem 0 0; padding:.55rem .7rem; border-radius:.55rem; background:rgba(0,0,0,.32); border:1px solid rgba(112,168,228,.12); font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-size:.64rem; overflow:auto; white-space:pre-wrap}
-    .ai-chat .bubble pre .hljs{background:transparent; padding:0}
+    .ai-chat .bubble pre{margin:.4rem 0 0; padding:.55rem .7rem; border-radius:.55rem; background:#000; border:1px solid rgba(112,168,228,.12); font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-size:.64rem; overflow:auto; white-space:pre-wrap}
+    .ai-chat .bubble pre .hljs{background:transparent; padding:0; color:#e8f2ff}
     .ai-chat .insert{margin-top:.4rem; padding:.28rem .6rem; border-radius:.45rem; border:1px solid rgba(84,183,255,.4); background:rgba(84,183,255,.12); color:#9fd4ff; font-size:.58rem; font-weight:700; cursor:pointer; transition:border-color .14s, background .14s, transform .14s; font-family:ui-monospace, SFMono-Regular, Consolas, monospace}
     .ai-chat .insert:hover{border-color:rgba(84,183,255,.75); color:#fff; background:rgba(40,137,235,.28); transform:translateY(-1px)}
     .ai-chat .typing{font-size:.6rem; color:#6e8aaa; font-style:italic}
@@ -899,9 +965,7 @@ export function getExplorerHtml(opts: ExplorerOptions = {}): string {
     .ai-form button{padding:.55rem 1rem; border:1px solid rgba(84,183,255,.55); border-radius:.55rem; color:#fff; background:linear-gradient(135deg, rgba(38,130,225,.75), rgba(90,67,183,.65)); box-shadow:0 8px 24px rgba(84,183,255,.28); font-size:.7rem; font-weight:800; cursor:pointer; white-space:nowrap; transition:transform .15s, filter .15s}
     .ai-form button:hover:not(:disabled){filter:brightness(1.1); transform:translateY(-1px)}
     .ai-form button:disabled{opacity:.4; cursor:not-allowed}
-    /* Theme toggle */
-    .theme-toggle{display:grid; place-items:center; width:2.1rem; height:2.1rem; padding:0; border:1px solid rgba(112,168,228,.24); border-radius:.6rem; color:#8fb8e4; background:rgba(84,183,255,.08); font-size:.9rem; line-height:1; cursor:pointer; transition:border-color .15s, color .15s, background .15s, transform .15s}
-    .theme-toggle:hover{border-color:rgba(84,183,255,.55); color:#bfe9ff; background:rgba(84,183,255,.16); transform:translateY(-1px)}
+    /* Theme (dark only) */
     /* Light theme overrides */
     [data-theme="light"] body{background:#eef3fb; color:#0b1220}
     [data-theme="light"] .agent-shell{background:#eef3fb}
@@ -915,16 +979,22 @@ export function getExplorerHtml(opts: ExplorerOptions = {}): string {
     [data-theme="light"] .ops .op{background:rgba(255,255,255,.72); border-color:rgba(60,110,180,.16); box-shadow:inset 0 1px rgba(255,255,255,.6)}
     [data-theme="light"] .ops .op b{color:#0b1220}
     [data-theme="light"] .ops .op:hover{background:rgba(84,183,255,.14)}
-    [data-theme="light"] .type-details details{background:rgba(255,255,255,.72); border-color:rgba(60,110,180,.16)}
-    [data-theme="light"] .type-details summary{color:#0b1220}
-    [data-theme="light"] .type-details .type-field{background:rgba(220,232,250,.6); color:#3a4c68; border-color:rgba(60,110,180,.1)}
-    [data-theme="light"] .type-details .type-field b{color:#1d6fd0}
+    [data-theme="light"] .type-details details{background:rgba(255,255,255,.72); border-color:rgba(60,110,180,.16); box-shadow:inset 0 1px rgba(255,255,255,.6)}
+    [data-theme="light"] .type-details details:hover{background:rgba(84,183,255,.14); border-color:rgba(60,110,180,.3)}
+    [data-theme="light"] .type-details summary{color:#0b1220}
+    [data-theme="light"] .type-details summary:hover{background:rgba(84,183,255,.14)}
+    [data-theme="light"] .type-details .type-desc{color:#5a6b84; background:rgba(60,110,180,.06); border-left-color:rgba(60,110,180,.35)}
+    [data-theme="light"] .type-details .type-field{background:rgba(255,255,255,.72); color:#0b1220; border-color:rgba(60,110,180,.16); box-shadow:inset 0 1px rgba(255,255,255,.6)}
+    [data-theme="light"] .type-details .type-field:hover{background:rgba(84,183,255,.14); border-color:rgba(60,110,180,.3)}
+    [data-theme="light"] .type-details .type-field b{color:#1d6fd0}
+    [data-theme="light"] .type-details .type-field .hljs{color:#0b1220}
     [data-theme="light"] .ai-hint, [data-theme="light"] .type-details .type-desc{color:#5a6b84}
     [data-theme="light"] .history div{color:#3a4c68}
     [data-theme="light"] .ai-popup{background:linear-gradient(160deg, rgba(255,255,255,.96), rgba(238,245,255,.97)); border-color:rgba(60,110,180,.2)}
     [data-theme="light"] .ai-chat .bubble{background:rgba(240,246,255,.8); color:#16233c; border-color:rgba(60,110,180,.18)}
     [data-theme="light"] .ai-chat .user .bubble{background:linear-gradient(160deg, rgba(84,183,255,.35), rgba(120,110,230,.3)); color:#0b1220}
-    [data-theme="light"] .ai-chat .bubble pre{background:rgba(220,232,250,.7)}
+    [data-theme="light"] .ai-chat .bubble pre{background:#000; border-color:rgba(112,168,228,.15)}
+    [data-theme="light"] .ai-chat .bubble pre .hljs{color:#e8f2ff}
     [data-theme="light"] .type-filter{background:rgba(255,255,255,.8); color:#0b1220; border-color:rgba(60,110,180,.2)}
     @media (max-width: 960px){ .ai-popup{right:.75rem; left:.75rem; width:auto} }
   </style>
@@ -944,15 +1014,14 @@ export function getExplorerHtml(opts: ExplorerOptions = {}): string {
         </span>
         <span class="agent-spacer"></span>
         <span class="agent-status"><span class="agent-status-dot"></span>Live</span>
-        <span class="agent-select-wrap"><span class="agent-select-label">POST</span><span class="agent-select-label" style="color:#9fd4ff">${escapeHtml(endpoint)}</span></span>
-        <button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme" title="Toggle dark/light">🌙</button>
-      </div>
+        <span class="agent-select-wrap"><span class="agent-select-label">POST</span><span class="agent-select-label" style="color:#9fd4ff">${escapeHtml(endpoint)}</span></span>
+      </div>
       <div class="agent-urlbar">
         <span class="agent-urlbar-lock" title="Secure connection">🔒</span>
         <span class="agent-urlbar-input">
           <input class="agent-urlbar-field" id="urlbar" type="text" aria-label="GraphQL endpoint URL" spellcheck="false" />
         </span>
-        <button class="agent-urlbar-btn" id="urlbar-copy" aria-label="Copy URL" title="Copy URL">📋</button>
+        <button class="agent-urlbar-btn" id="urlbar-copy" aria-label="Copy URL" title="Copy URL"><svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
         <button class="agent-urlbar-btn" id="urlbar-refresh" aria-label="Reload explorer" title="Reload">↻</button>
         <span class="agent-urlbar-note">POST</span>
       </div>
@@ -973,9 +1042,12 @@ export function getExplorerHtml(opts: ExplorerOptions = {}): string {
               <span>${op.type}</span>
             </div>`).join('') : `<div class="ai-hint" style="padding:8px">No typedefs discovered yet. <b>hello</b> is always available — try <code>{ hello }</code> below.<br>Add more: <code>npx nexus make:subgraph post --app backend</code> (creates a real Post model).<br><br>SDL preview:<br><pre style="white-space:pre-wrap; font-size:11px; opacity:.7">${escapeHtml(rawSdl.slice(0,600) || 'empty')}</pre></div>`}
         </div>
-        <div class="ai-hint" style="padding:0 .8rem .6rem">Click a field to insert its example. Open <b>Docs</b> in GraphiQL (left) to browse full schema. Builtin: <code>hello</code> + <code>ping(message)</code> always visible; added subgraphs appear live via introspection.</div>
-
-<div class="panel-head" style="margin-top:.4rem; border-radius:.6rem .6rem 0 0"><span>Type Details</span><span style="opacity:.6" id="types-count">loading…</span></div>
+        <div class="ai-hint" style="padding:0 .8rem .6rem">Click a field to insert its example. Open <b>Docs</b> in GraphiQL (left) to browse full schema. Builtin: <code>hello</code> + <code>ping(message)</code> always visible; added subgraphs appear live via introspection.</div>
+
+        <div class="panel-head" style="margin-top:.4rem; border-radius:.6rem .6rem 0 0"><span>History</span><span class="panel-head-actions"><button id="history-clear" class="graphiql-history-clear" title="Clear history">Clear</button><button id="history-toggle" class="graphiql-history-btn" title="Toggle history">Show</button></span></div>
+        <div class="history" id="history" hidden><div class="ai-hint" style="padding:8px">No history yet</div></div>
+
+<div class="panel-head" style="margin-top:.4rem; border-radius:.6rem .6rem 0 0"><span>Type Details</span><span style="opacity:.6" id="types-count">loading…</span></div>
         <input class="type-filter" id="type-filter" placeholder="Filter types/fields…" />
         <div class="type-details" id="types"><div class="ai-hint" style="padding:8px">Loading complete schema via introspection…</div></div>
 
@@ -983,7 +1055,17 @@ export function getExplorerHtml(opts: ExplorerOptions = {}): string {
     </main>
   </div>
 
-  <!-- AI Assistant FAB + Chat Popup -->
+  <!-- Alert toast (top-right corner) — shows URL copied / query copied / success / failure -->
+  <div class="agent-alert hide" id="agent-alert" role="status">
+    <div class="agent-alert-mark" id="agent-alert-mark">✓</div>
+    <div class="agent-alert-body">
+      <strong class="agent-alert-title" id="agent-alert-title">Success</strong>
+      <span class="agent-alert-msg" id="agent-alert-msg"></span>
+    </div>
+    <button class="agent-alert-close" id="agent-alert-close" aria-label="Dismiss" title="Dismiss">×</button>
+  </div>
+
+  <!-- AI Assistant FAB + Chat Popup -->
   <button id="ai-fab" class="fab" aria-label="AI Assistant" title="AI Assistant">✦</button>
   <div id="ai-popup" class="ai-popup" hidden>
     <div class="ai-popup-head"><span>AI Assistant <span style="opacity:.6" id="ai-model-label"></span></span><button id="ai-close" aria-label="Close">×</button></div>
@@ -1004,7 +1086,49 @@ export function getExplorerHtml(opts: ExplorerOptions = {}): string {
     const sdlPreview = ${JSON.stringify(sdlPreview)};
     const rawSdlClient = ${JSON.stringify(rawSdl.slice(0,4000))};
     const STORAGE_KEY = 'nexus-graphql-history';
-    const THEME_KEY = 'nexus-theme';
+
+    // \u2192 Unified tooltips: convert every native title to a styled data-tip
+    // so all tooltips share one look (header, urlbar, history, FAB, fields...).
+    function initTooltips(root){
+      (root || document).querySelectorAll('[title]').forEach(function(el){
+        if (el.hasAttribute('data-tip') || el.getAttribute('title') === '') return;
+        el.setAttribute('data-tip', el.getAttribute('title'));
+        el.removeAttribute('title');
+      });
+    }
+    initTooltips(document);
+
+    // \u2192 Alert toast (top-right) — show success / error / info messages.
+    const agentAlert = document.getElementById('agent-alert');
+    const agentAlertClose = document.getElementById('agent-alert-close');
+    const agentAlertMark = document.getElementById('agent-alert-mark');
+    const agentAlertTitle = document.getElementById('agent-alert-title');
+    const agentAlertMsg = document.getElementById('agent-alert-msg');
+    let agentAlertTimer = null;
+    function showAlert(title, msg, kind){
+      if (!agentAlert || !agentAlertTitle || !agentAlertMsg) return;
+      kind = kind || 'success';
+      agentAlert.classList.remove('is-error', 'is-info');
+      if (kind === 'error') agentAlert.classList.add('is-error');
+      else if (kind === 'info') agentAlert.classList.add('is-info');
+      agentAlertMark.textContent = kind === 'error' ? '!' : kind === 'info' ? 'i' : '✓';
+      agentAlertTitle.textContent = title;
+      agentAlertMsg.textContent = msg;
+      agentAlert.classList.remove('hide');
+      agentAlert.classList.add('show');
+      if (agentAlertTimer) clearTimeout(agentAlertTimer);
+      agentAlertTimer = setTimeout(function(){
+        agentAlert.classList.remove('show');
+        agentAlert.classList.add('hide');
+      }, 3500);
+    }
+    if (agentAlertClose) {
+      agentAlertClose.addEventListener('click', function(){
+        agentAlert.classList.remove('show');
+        agentAlert.classList.add('hide');
+        if (agentAlertTimer) clearTimeout(agentAlertTimer);
+      });
+    }
 
     // \u2192 Editable/copyable URL bar (below the header) — shows the live GraphQL endpoint.
     const urlbar = document.getElementById('urlbar');
@@ -1019,17 +1143,21 @@ export function getExplorerHtml(opts: ExplorerOptions = {}): string {
           const val = urlbar.value;
           function done() {
             copyBtn.classList.add('copied');
-            copyBtn.textContent = '✓';
+            copyBtn.innerHTML = '<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>';
+            showAlert('URL copied', 'GraphQL endpoint copied to clipboard.', 'success');
             setTimeout(function () {
               copyBtn.classList.remove('copied');
-              copyBtn.textContent = '📋';
+              copyBtn.innerHTML = '<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
             }, 1200);
           }
+          function fail() {
+            showAlert('Copy failed', 'Could not copy the URL to your clipboard.', 'error');
+          }
           if (navigator.clipboard && navigator.clipboard.writeText) {
-            navigator.clipboard.writeText(val).then(done, function () { urlbar.select(); try { document.execCommand('copy'); done(); } catch (e) {} });
+            navigator.clipboard.writeText(val).then(done, function () { urlbar.select(); try { document.execCommand('copy'); done(); } catch (e) { fail(); } });
           } else {
             urlbar.select();
-            try { document.execCommand('copy'); done(); } catch (e) {}
+            try { document.execCommand('copy'); done(); } catch (e) { fail(); }
           }
         });
       }
@@ -1046,48 +1174,12 @@ export function getExplorerHtml(opts: ExplorerOptions = {}): string {
       };
     }
 
-let csrfToken = null;
+let csrfToken = null;
 
-    // \u2190 History button in GraphiQL sidebar
-    const graphiqlSidebar = document.querySelector('.graphiql-container .graphiql-sidebar')
-    if (graphiqlSidebar) {
-      const historyBtn = document.createElement('button')
-      historyBtn.className = 'graphiql-history-btn'
-      historyBtn.setAttribute('aria-label', 'Toggle history')
-      historyBtn.textContent = 'History'
-      graphiqlSidebar.appendChild(historyBtn)
-      historyBtn.addEventListener('click', function() {
-        const historyPanel = document.getElementById('history')
-        if (historyPanel) {
-          historyPanel.hidden = !historyPanel.hidden
-          this.classList.toggle('active', !historyPanel.hidden)
-        }
-      })
-    }
-
-    // \u2192 Theme toggle (dark default, persisted, respects prefers-color-scheme) ──
-    // Also flips body.graphiql-dark / graphiql-light so GraphiQL's own CDN
-    // dark palette applies (it ignores [data-theme] otherwise).
-    function applyTheme(t){
-      try{ localStorage.setItem(THEME_KEY, t); }catch(e){}
-      document.documentElement.setAttribute('data-theme', t);
-      document.body.classList.toggle('graphiql-dark', t === 'dark');
-      document.body.classList.toggle('graphiql-light', t === 'light');
-      const b = document.getElementById('theme-toggle');
-      if(b) b.textContent = t === 'light' ? '☀️' : '🌙';
-    }
-    (function initTheme(){
-      let saved = null;
-      try{ saved = localStorage.getItem(THEME_KEY); }catch(e){}
-      if(saved === 'light' || saved === 'dark'){ applyTheme(saved); return; }
-      if(window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches){ applyTheme('light'); return; }
-      applyTheme('dark');
-    })();
-    const themeBtn = document.getElementById('theme-toggle');
-    if(themeBtn) themeBtn.addEventListener('click', function(){
-      const cur = document.documentElement.getAttribute('data-theme');
-      applyTheme(cur === 'light' ? 'dark' : 'light');
-    });
+    // \u2192 Dark-only theme — force GraphiQL's dark palette (its CDN ignores
+    // [data-theme] unless body.graphiql-dark is present).
+    document.documentElement.setAttribute('data-theme', 'dark');
+    document.body.classList.add('graphiql-dark');
 
     // ── highlight.js helper (mirrors Agent.tsx highlightCode) ──
     function escapeHtml(s){ return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
@@ -1144,9 +1236,17 @@ async function fetcher(params, opts) {
           if(!r.ok) throw new Error('GraphiQL request failed: ' + r.status);
           if (typeof window.__updateUrlbar === 'function' && params && params.query) window.__updateUrlbar(params.query, token);
           return r.json();
+        }).then(function(json){
+          if (json && json.errors && json.errors.length) {
+            showAlert('Query error', (json.errors[0] && json.errors[0].message) || 'The query returned errors.', 'error');
+          } else if (params && params.query && params.query.indexOf('__schema') === -1) {
+            showAlert('Success', 'Query executed successfully.', 'success');
+          }
+          return json;
         });
       } catch(e) {
         console.error('GraphiQL fetcher error:', e);
+        showAlert('Request failed', (e && e.message) || 'Could not reach the GraphQL endpoint.', 'error');
         return Promise.reject(e);
       }
     }
@@ -1160,18 +1260,41 @@ async function fetcher(params, opts) {
         renderHistory();
       } catch {}
     }
-    function renderHistory() {
-      const el = document.getElementById('history');
-      if (!el) return;
-      try {
-        const list = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
-        el.innerHTML = list.length ? list.map(q => \`<div title="\${q.replace(/"/g,'&quot;')}">\${q.slice(0,80)}</div>\`).join('') : '<div style="opacity:.5">No history yet</div>';
-        el.querySelectorAll('div').forEach(div => div.addEventListener('click', () => {
-          const q = div.getAttribute('title');
-          if (window._graphiql) window._graphiql.setQuery(q);
-        }));
-      } catch {}
-    }
+    function renderHistory() {
+      const el = document.getElementById('history');
+      if (!el) return;
+      try {
+        const list = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
+        el.innerHTML = list.length ? list.map(q => \`<div data-tip="\${q.replace(/"/g,'&quot;')}" title="\${q.replace(/"/g,'&quot;')}">\${q.slice(0,80)}</div>\`).join('') : '<div style="opacity:.5">No history yet</div>';
+        el.querySelectorAll('div').forEach(div => div.addEventListener('click', () => {
+          const q = div.getAttribute('title');
+          if (window._graphiql) window._graphiql.setQuery(q);
+        }));
+      } catch {}
+    }
+
+    const historyClearBtn = document.getElementById('history-clear');
+    if (historyClearBtn) {
+      historyClearBtn.addEventListener('click', () => {
+        try { localStorage.removeItem(STORAGE_KEY); } catch {}
+        renderHistory();
+      });
+    }
+
+    const historyToggleBtn = document.getElementById('history-toggle');
+    const historyPanel = document.getElementById('history');
+    if (historyToggleBtn && historyPanel) {
+      const sync = () => {
+        historyToggleBtn.textContent = historyPanel.hidden ? 'Show' : 'Hide';
+        historyToggleBtn.classList.toggle('active', !historyPanel.hidden);
+      };
+      sync();
+      historyToggleBtn.addEventListener('click', () => {
+        historyPanel.hidden = !historyPanel.hidden;
+        sync();
+      });
+    }
+
 
     // Mount GraphiQL
     const defaultQuery = ${JSON.stringify(defaultQuery)};
@@ -1201,9 +1324,9 @@ async function fetcher(params, opts) {
         });
       });
     }
-    bindOps();
-    renderHistory();
-
+    bindOps();
+    renderHistory();
+
     // Live introspection refresh — discovers hello + any added subgraph and renders full type details
     (function refreshOpsFromIntrospection(){
       const INTROSPECTION_QUERY = '{ __schema { queryType { name fields { name description args { name description type { name kind ofType { name kind ofType { name kind } } } } type { name kind ofType { name kind ofType { name kind } } } } } mutationType { name fields { name description args { name description type { name kind ofType { name kind } } } type { name kind ofType { name kind } } } } subscriptionType { name fields { name description args { name description type { name kind ofType { name kind } } } type { name kind ofType { name kind } } } } types { name kind description fields(includeDeprecated:false) { name description args { name description type { name kind ofType { name kind } } } type { name kind ofType { name kind ofType { name kind } } } } inputFields { name description type { name kind ofType { name kind } } } enumValues { name description } } } }';
@@ -1269,31 +1392,55 @@ async function fetcher(params, opts) {
             const q = (filter||'').toLowerCase();
             const filtered = q ? userTypes.filter(function(t){ return t.name.toLowerCase().indexOf(q)!==-1 || (t.fields && t.fields.some(function(f){ return f.name.toLowerCase().indexOf(q)!==-1; })); }) : userTypes;
             if (!filtered.length){ typesEl.innerHTML = '<div class="ai-hint" style="padding:8px">No types match “' + escapeTd(filter) + '”.</div>'; return; }
-            typesEl.innerHTML = filtered.map(function(t){
-              const kind = t.kind;
-              const desc = t.description ? '<div class="type-desc">' + escapeTd(t.description.slice(0,300)) + '</div>' : '';
-              let fieldsHtml = '';
-              if (t.fields && t.fields.length){
-                fieldsHtml = '<div class="type-fields">' + t.fields.map(function(f){
-                  const fType = typeToString(f.type);
-                  const fArgs = f.args && f.args.length ? '(' + f.args.map(function(a){ return a.name + ': ' + typeToString(a.type); }).join(', ') + ')' : '';
-                  const fDesc = f.description ? ' — ' + escapeTd(f.description.slice(0,80)) : '';
-                  const sig = f.name + fArgs + ': ' + fType;
-                  return '<div class="type-field"><span><code class="hljs">' + highlightCode(sig, 'graphql') + '</code><span style="opacity:.6">' + fDesc + '</span></span><span style="font-size:10px; opacity:.5; cursor:pointer" data-field-query="' + escapeTd(f.name) + '">→</span></div>';
-                }).join('') + '</div>';
-              } else if (t.inputFields && t.inputFields.length){
-                fieldsHtml = '<div class="type-fields">' + t.inputFields.map(function(f){ return '<div class="type-field"><span><code class="hljs">' + highlightCode(f.name + ': ' + typeToString(f.type), 'graphql') + '</code></span></div>'; }).join('') + '</div>';
-              } else if (t.enumValues && t.enumValues.length){
-                fieldsHtml = '<div class="type-fields">' + t.enumValues.map(function(v){ return '<div class="type-field"><span><b>' + escapeTd(v.name) + '</b>' + (v.description ? ' — ' + escapeTd(v.description.slice(0,60)) : '') + '</span></div>'; }).join('') + '</div>';
-              }
-              const open = (t.name==='Query' || t.name==='Post' || t.name==='Message') ? ' open' : '';
-              return '<details' + open + '><summary><span><b>' + escapeTd(t.name) + '</b> ' + (desc ? '' : '') + '</span><span class="type-kind">' + escapeTd(kind) + '</span></summary>' + desc + fieldsHtml + '</details>';
-            }).join('');
-          }
-          renderTypes('');
-          if (filterEl){
-            filterEl.addEventListener('input', function(){ renderTypes(filterEl.value); });
+            typesEl.innerHTML = filtered.map(function(t){
+              const kind = t.kind || 'OBJECT';
+              const kindIcon = kind==='INPUT_OBJECT' ? '( )' : kind==='ENUM' ? 'A-Z' : kind==='SCALAR' ? 'S' : 'T';
+              const iconCls = kind==='INPUT_OBJECT' ? 'kind-input' : kind==='ENUM' ? 'kind-enum' : kind==='SCALAR' ? 'kind-scalar' : '';
+              const kindLabel = kind.replace(/_/g,' ').toLowerCase();
+              const desc = t.description ? '<div class="type-desc">' + escapeTd(t.description.slice(0,300)) + '</div>' : '';
+              function fieldSig(f){
+                const fType = typeToString(f.type);
+                const fArgs = f.args && f.args.length ? '(' + f.args.map(function(a){ return '<span class="tok-arg">' + escapeTd(a.name) + '</span>: ' + '<span class="tok-type">' + escapeTd(typeToString(a.type)) + '</span>'; }).join(', ') + ')' : '';
+                return escapeTd(f.name) + fArgs + ': ' + '<span class="tok-type">' + escapeTd(fType) + '</span>';
+              }
+              let fieldsHtml = '';
+              if (t.fields && t.fields.length){
+                fieldsHtml = '<span class="type-subhead">Fields</span><div class="type-fields">' + t.fields.map(function(f){
+                  const fDesc = f.description ? '<span style="opacity:.6"> — ' + escapeTd(f.description.slice(0,70)) + '</span>' : '';
+                  return '<div class="type-field"><span><code class="hljs">' + fieldSig(f) + '</code>' + fDesc + '</span><span class="type-field-arrow" data-field-query="' + escapeTd(f.name) + '" title="Insert ' + escapeTd(f.name) + '">Insert →</span></div>';
+                }).join('') + '</div>';
+              } else if (t.inputFields && t.inputFields.length){
+                fieldsHtml = '<span class="type-subhead">Input Fields</span><div class="type-fields">' + t.inputFields.map(function(f){
+                  const fType = typeToString(f.type);
+                  return '<div class="type-field"><span><code class="hljs">' + escapeTd(f.name) + ': ' + '<span class="tok-type">' + escapeTd(fType) + '</span></code></span></div>';
+                }).join('') + '</div>';
+              } else if (t.enumValues && t.enumValues.length){
+                fieldsHtml = '<span class="type-subhead">Enum Values</span><div class="type-fields">' + t.enumValues.map(function(v){
+                  return '<div class="type-field"><span><b>' + escapeTd(v.name) + '</b>' + (v.description ? '<span style="opacity:.6"> — ' + escapeTd(v.description.slice(0,50)) + '</span>' : '') + '</span></div>';
+                }).join('') + '</div>';
+              }
+              const open = (t.name==='Query' || t.name==='Post' || t.name==='Message') ? ' open' : '';
+              return '<details' + open + '><summary><span class="type-name"><span class="type-icon ' + iconCls + '">' + kindIcon + '</span><b>' + escapeTd(t.name) + '</b></span><span style="display:inline-flex;align-items:center;gap:.35rem;flex:0 0 auto"><span class="type-kind">' + escapeTd(kindLabel) + '</span><span class="type-chevron">›</span></span></summary><div class="type-body">' + desc + fieldsHtml + '</div></details>';
+            }).join('');
+            initTooltips(typesEl);
           }
+          renderTypes('');
+          // Insert a field's name into the editor when its chip is clicked
+          // (delegated so re-renders after filtering keep working).
+          typesEl.addEventListener('click', function(ev){
+            var t = ev.target;
+            if (!t || !t.classList) return;
+            if (t.classList.contains('type-field-arrow')){
+              var name = t.getAttribute('data-field-query');
+              if (name && window._graphiql){
+                window._graphiql.setQuery('{ ' + name + ' }');
+                showAlert('Query copied', 'Inserted { ' + name + ' } into the editor.', 'success');
+              }
+            }
+          });
+          if (filterEl){
+            filterEl.addEventListener('input', function(){ renderTypes(filterEl.value); });
+          }
         }).catch(function(){ 
           const el=document.getElementById('types'); if(el) el.innerHTML='<div class="ai-hint" style="padding:8px">Introspection failed. SDL preview:<pre style="white-space:pre-wrap; font-size:11px; opacity:.7">' + escapeTd(rawSdlClient.slice(0,800) || 'empty') + '</pre></div>';
           const c=document.getElementById('types-count'); if(c) c.textContent='—';

package/src/federation/createFederatedGateway.ts

@@ -1,7 +1,7 @@
 import { parse, type DocumentNode, type ExecutionResult } from 'graphql';
 import type { Subgraph, GraphQLContext, ExecuteParams } from '../types.js';
 import { composeSupergraph, type Supergraph } from './composeSupergraph.js';
-import { executeFederated, planQuery, type FetchPlan } from './executor.js';
+import { executeFederated, subscribeFederated, planQuery, type FetchPlan } from './executor.js';
 
 export interface FederatedGateway {
   /** Client-facing merged schema. */
@@ -9,6 +9,7 @@ export interface FederatedGateway {
   supergraph: Supergraph;
   subgraphs: Subgraph[];
   execute(params: Omit<ExecuteParams, 'schema' | 'resolvers'>): Promise<ExecutionResult>;
+  subscribe(params: Omit<ExecuteParams, 'schema' | 'resolvers'>): Promise<AsyncIterable<ExecutionResult> | ExecutionResult>;
   /** Inspect the fetch plan for a query (golden tests / debugging). */
   plan(document: DocumentNode): FetchPlan;
 }
@@ -29,6 +30,10 @@ export function createFederatedGateway(subgraphs: Subgraph[]): FederatedGateway
       const document: DocumentNode = params.document;
       return executeFederated(supergraph, document, params.variableValues, (params.contextValue as GraphQLContext) ?? {});
     },
+    async subscribe(params) {
+      const document: DocumentNode = params.document;
+      return subscribeFederated(supergraph, document, params.variableValues, (params.contextValue as GraphQLContext) ?? {});
+    },
     plan(document) {
       return planQuery(supergraph, document);
     },

package/src/federation/executor.ts

@@ -1,4 +1,4 @@
-import { execute, parse, isObjectType, isInterfaceType, type DocumentNode, type SelectionSetNode, type FieldNode, type InlineFragmentNode, type FragmentSpreadNode, type ExecutionResult } from 'graphql';
+import { execute, subscribe, parse, isObjectType, isInterfaceType, type DocumentNode, type SelectionSetNode, type FieldNode, type InlineFragmentNode, type FragmentSpreadNode, type FragmentDefinitionNode, type ExecutionResult } from 'graphql';
 
 /** Introspection root fields (`__schema`/`__type`) live on the merged schema, not any one subgraph. */
 function isIntrospectionSelection(sel: SelectionSetNode): boolean {
@@ -8,7 +8,7 @@ function isIntrospectionSelection(sel: SelectionSetNode): boolean {
 }
 import type { Supergraph } from './composeSupergraph.js';
 import type { Subgraph, GraphQLContext } from '../types.js';
-import { createFieldResolver } from '../gateway/fieldResolver.js';
+import { createFieldResolver, createSubscribeFieldResolver } from '../gateway/fieldResolver.js';
 
 /**
  * Naive sequential federated executor (Phase 6, v1).
@@ -74,7 +74,7 @@ export async function executeFederated(
   contextValue: GraphQLContext,
 ): Promise<ExecutionResult> {
   const op = document.definitions.find((d) => d.kind === 'OperationDefinition') as
-    | { selectionSet: SelectionSetNode; operation: string }
+    | { selectionSet: SelectionSetNode; operation: string; variableDefinitions?: readonly { variable?: { name?: { value?: string } } }[] }
     | undefined;
   if (!op) return { errors: [{ message: 'No operation in document' }] as unknown as NonNullable<ExecutionResult['errors']> };
   const rootType = op.operation === 'mutation' ? 'Mutation' : op.operation === 'subscription' ? 'Subscription' : 'Query';
@@ -109,7 +109,7 @@ export async function executeFederated(
   for (const [subName, fields] of rootGroups) {
     const sub = subgraphByName.get(subName)!;
     const sel = trimSelection(fields, rootType, subName, supergraph, true);
-    const sdl = `${op.operation} { ${sel} }`;
+    const sdl = `${op.operation}${varDefsToSdl(op.variableDefinitions)} { ${sel} }`;
     const res = await execSubgraph(sub, parse(sdl), variableValues, contextValue);
     if (res.errors) return { errors: res.errors };
     Object.assign(data, res.data as Record<string, unknown>);
@@ -147,6 +147,43 @@ async function execSubgraph(sub: Subgraph, document: DocumentNode, variableValue
   });
 }
 
+/**
+ * Execute a federated subscription in-process. Subscriptions are not federated
+ * in v1 — a subscription's root field is owned by exactly one subgraph, so we
+ * route the whole operation to that subgraph and subscribe with its resolvers.
+ */
+export async function subscribeFederated(
+  supergraph: Supergraph,
+  document: DocumentNode,
+  variableValues: Record<string, any> | undefined,
+  contextValue: GraphQLContext,
+): Promise<AsyncIterable<ExecutionResult> | ExecutionResult> {
+  const op = document.definitions.find((d) => d.kind === 'OperationDefinition') as
+    | { selectionSet: SelectionSetNode; operation: string }
+    | undefined;
+  if (!op) return { errors: [{ message: 'No operation in document' }] as unknown as NonNullable<ExecutionResult['errors']> };
+  if (op.operation !== 'subscription') return { errors: [{ message: 'subscribe() only supports subscription operations' }] as unknown as NonNullable<ExecutionResult['errors']> };
+
+  const field = op.selectionSet.selections.find((s) => s.kind === 'Field') as FieldNode | undefined;
+  if (!field) return { errors: [{ message: 'No subscription field found' }] as unknown as NonNullable<ExecutionResult['errors']> };
+
+  const owner = supergraph.ownership.get('Subscription')?.get(field.name.value);
+  if (!owner) return { errors: [{ message: `No subgraph owns Subscription.${field.name.value}` }] as unknown as NonNullable<ExecutionResult['errors']> };
+
+  const sub = supergraph.subgraphs.find((s) => s.name === owner);
+  if (!sub) return { errors: [{ message: `Subgraph "${owner}" not found` }] as unknown as NonNullable<ExecutionResult['errors']> };
+
+  return subscribe({
+    schema: sub.schema,
+    document,
+    rootValue: undefined,
+    contextValue,
+    variableValues,
+    subscribeFieldResolver: createSubscribeFieldResolver(sub.resolvers),
+    fieldResolver: createFieldResolver(sub.resolvers),
+  }) as Promise<AsyncIterable<ExecutionResult> | ExecutionResult>;
+}
+
 /** Unwrap a GraphQL type name to its base named type. */
 function baseType(type: string): string {
   return type.replace(/[\[\]!]/g, '');
@@ -207,9 +244,27 @@ function trimSelection(selections: readonly (FieldNode | InlineFragmentNode | Fr
   return parts.join(' ');
 }
 
+/** Serialize a document's variable definitions back to SDL, e.g. `($id: ID!, $title: String!)`. */
+function varDefsToSdl(defs: readonly { variable?: { name?: { value?: string } }; type?: import('graphql').TypeNode; defaultValue?: import('graphql').ConstValueNode }[] | undefined): string {
+  if (!defs || defs.length === 0) return '';
+  const parts = defs.map((d) => {
+    const name = d.variable?.name?.value;
+    if (!name || !d.type) return '';
+    return `$${name}: ${typeToSdl(d.type)}${d.defaultValue !== undefined ? ` = ${valueToSdl(d.defaultValue)}` : ''}`;
+  }).filter(Boolean);
+  return parts.length ? `(${parts.join(', ')})` : '';
+}
+function typeToSdl(t: import('graphql').TypeNode): string {
+  switch (t.kind) {
+    case 'NamedType': return t.name.value;
+    case 'ListType': return `[${typeToSdl(t.type)}]`;
+    case 'NonNullType': return `${typeToSdl(t.type)}!`;
+    default: return '';
+  }
+}
+
 /** Serialize a field's arguments to SDL, e.g. `(id: "u1", limit: $limit)`. */
-function argsToSdl(args: readonly import('graphql').ArgumentNode[] | undefined): string {
-  if (!args || args.length === 0) return '';
+function argsToSdl(args: readonly import('graphql').ArgumentNode[] | undefined): string {  if (!args || args.length === 0) return '';
   return '(' + args.map((a) => `${a.name.value}: ${valueToSdl(a.value)}`).join(', ') + ')';
 }
 function valueToSdl(v: import('graphql').ValueNode): string {

package/vitest.config.ts

@@ -4,6 +4,7 @@ export default defineProject({
   test: {
     environment: 'node',
     include: ['tests/**/*.test.ts'],
+    env: { NEXUS_LICENSE_KEY: 'nxl_test_master_key_001' },
     globals: false,
     testTimeout: 15_000,
   },