@firedrill-tools/netsuite 0.1.2

package/firedrill/tools/netsuite/app/site/styles/chrome.css

@@ -0,0 +1,183 @@
+/* The persistent NetSuite frame: application bar, global menu bar, account strip, menus, dialogs, footer. */
+.appbar {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  background: var(--bar);
+  color: #fff;
+  padding: 0 14px;
+  height: 54px;
+  flex: 0 0 auto;
+}
+.brand { display: flex; align-items: center; height: 54px; overflow: hidden; flex: 0 0 auto; }
+.brand img { height: 68px; width: 68px; margin: -7px 0; filter: invert(1) brightness(1.9); }
+.brand:hover { text-decoration: none; }
+
+.appbar-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
+
+.global-search { position: relative; display: flex; align-items: center; }
+.global-search input {
+  width: 210px;
+  min-height: 24px;
+  background: #0f1d2e;
+  border: 1px solid #3c5474;
+  color: #fff;
+  padding-left: 26px;
+}
+.global-search input::placeholder { color: #93a4b7; }
+.gs-go {
+  position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
+  background: none; border: none; cursor: pointer; color: #93a4b7; display: flex; padding: 0;
+}
+
+.bar-btn, .user-btn {
+  background: none;
+  border: none;
+  color: #dfe7f0;
+  font: inherit;
+  font-size: 11px;
+  cursor: pointer;
+  padding: 5px 7px;
+  border-radius: var(--radius);
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+.bar-btn:hover, .user-btn:hover, .bar-btn.open, .user-btn.open { background: rgba(255, 255, 255, 0.14); color: #fff; }
+.bar-label { display: none; }
+.user-btn { padding-left: 6px; }
+.avatar {
+  width: 24px; height: 24px; border-radius: 50%;
+  background: #4a7bb5; color: #fff; font-size: 10px; font-weight: 700;
+  display: inline-flex; align-items: center; justify-content: center;
+}
+.user-lines { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
+.user-name { font-weight: 600; color: #fff; }
+.user-role { font-size: 10px; color: #a9bbcd; }
+
+.nav-toggle { display: none; background: none; border: none; color: #fff; cursor: pointer; padding: 4px; }
+
+/* ---- global menu bar ---- */
+.menubar {
+  display: flex;
+  align-items: stretch;
+  background: var(--menu);
+  flex: 0 0 auto;
+  padding: 0 6px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.menubar::-webkit-scrollbar { display: none; }
+.menubar .tab {
+  background: none;
+  border: none;
+  color: #eaf1f9;
+  font: inherit;
+  font-size: 12px;
+  padding: 7px 11px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.menubar .tab:hover, .menubar .tab.open { background: var(--menu-hover); color: #fff; }
+.menubar .tab.active { background: #1c3a5e; color: #fff; font-weight: 600; }
+
+/* ---- account strip ---- */
+.account-strip {
+  display: flex; align-items: center; gap: 8px;
+  background: #dbe3ec;
+  border-bottom: 1px solid #b7c2ce;
+  padding: 3px 14px;
+  font-size: 11px;
+  color: #33414f;
+  flex: 0 0 auto;
+}
+.acct-name { font-weight: 700; }
+.acct-sep { color: #8b98a6; }
+.acct-role { background: none; border: none; font: inherit; color: var(--link); cursor: pointer; padding: 0; }
+.acct-role:hover { text-decoration: underline; }
+.acct-chip {
+  border: 1px solid #9fb4cb; background: #eaf1f8; color: #2c4f7c;
+  border-radius: 9px; padding: 0 8px; font-size: 10px; font-weight: 600;
+}
+.acct-date { margin-left: auto; color: #4d5a68; }
+
+.page { flex: 1 1 auto; padding: 12px 14px 22px; outline: none; }
+
+/* ---- footer ---- */
+.ns-footer {
+  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
+  border-top: 1px solid #c3cbd6;
+  background: #e4e8ee;
+  padding: 6px 14px;
+  font-size: 10px;
+  color: #56616e;
+  flex: 0 0 auto;
+}
+.foot-links { display: flex; gap: 10px; }
+.foot-link { background: none; border: none; color: var(--link); font: inherit; cursor: pointer; padding: 0; }
+.foot-link:hover { text-decoration: underline; }
+.foot-note { margin-left: auto; }
+
+/* ---- dropdown menus ---- */
+.menu-pop {
+  position: fixed;
+  z-index: 30;
+  min-width: 210px;
+  max-width: 320px;
+  background: #fff;
+  border: 1px solid #93a3b4;
+  box-shadow: 0 6px 18px rgba(16, 32, 52, 0.22);
+  padding: 3px 0;
+}
+.menu-head { padding: 5px 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; color: #6b7683; letter-spacing: 0.04em; }
+.menu-divider { height: 1px; background: #dde2e9; margin: 3px 0; }
+.mi {
+  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
+  background: none; border: none; font: inherit; font-size: 12px; text-align: left;
+  padding: 4px 12px; cursor: pointer; color: var(--ink);
+}
+.mi:hover:not(:disabled) { background: var(--menu-hover); color: #fff; }
+.mi:disabled { color: #9aa5b1; cursor: default; }
+.mi-ns { color: #4a5663; }
+.mi-hint { font-size: 10px; color: #8b97a4; }
+.mi:hover .mi-hint { color: #d9e4f0; }
+
+/* ---- dialogs ---- */
+.scrim {
+  position: fixed; inset: 0; z-index: 50;
+  background: rgba(16, 26, 38, 0.45);
+  display: flex; align-items: flex-start; justify-content: center;
+  padding: 60px 16px 24px;
+  overflow: auto;
+}
+.dialog { background: #fff; border: 1px solid #7c8a99; width: min(520px, 100%); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3); }
+.dialog.wide { width: min(820px, 100%); }
+.dialog-head {
+  display: flex; align-items: center; justify-content: space-between;
+  background: linear-gradient(#3f76b4, #28598f); color: #fff; padding: 6px 10px;
+}
+.dialog-head h2 { margin: 0; font-size: 13px; font-weight: 700; }
+.dialog-head .icon-btn { color: #fff; }
+.dialog-body { padding: 12px; }
+.dialog-foot { display: flex; justify-content: flex-end; gap: 6px; padding: 8px 10px; background: #eef1f5; border-top: 1px solid var(--line-soft); }
+
+/* ---- toast ---- */
+.toast {
+  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
+  z-index: 60; display: flex; align-items: center; gap: 8px;
+  padding: 8px 14px; font-size: 12px; border: 1px solid; border-radius: var(--radius);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+}
+.toast[hidden] { display: none; }
+.toast.success { background: #e7f4ea; border-color: #9ccbab; color: #14532b; }
+.toast.error { background: #fdecea; border-color: #e0a7a3; color: #7d1a17; }
+.toast button { background: none; border: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
+
+@media (max-width: 860px) {
+  .nav-toggle { display: inline-flex; }
+  .menubar { display: none; }
+  .appbar.nav-open + .menubar { display: block; }
+  .appbar.nav-open + .menubar .tab { display: block; width: 100%; text-align: left; }
+  .global-search input { width: 130px; }
+  .user-lines { display: none; }
+}

package/firedrill/tools/netsuite/app/site/styles/pages.css

@@ -0,0 +1,134 @@
+/* Dashboard portlets, record pages (header band, field columns, subtabs, sublists) and the SuiteQL tool. */
+.dash { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; align-items: start; }
+.dash .col { display: flex; flex-direction: column; gap: 12px; }
+.dash-title { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; margin: 0 0 2px; }
+.dash-title h1 { margin: 0; font-size: 17px; font-weight: 700; color: #1b2a3a; }
+
+.portlet { background: var(--panel); border: 1px solid var(--line); }
+.portlet > header {
+  display: flex; align-items: center; gap: 8px;
+  background: linear-gradient(#5d84b0, #416a97);
+  color: #fff; padding: 4px 9px;
+}
+.portlet > header h2 { margin: 0; font-size: 12px; font-weight: 700; }
+.portlet > header .phead-actions { margin-left: auto; display: flex; gap: 2px; }
+.portlet > header .icon-btn { color: #dfe9f4; }
+.portlet .pbody { padding: 8px 10px; }
+.portlet table.kv { width: 100%; border-collapse: collapse; font-size: 12px; }
+.portlet table.kv td { padding: 3px 0; border-bottom: 1px solid #edf0f4; }
+.portlet table.kv td.num { text-align: right; font-weight: 700; }
+.portlet table.kv tr:last-child td { border-bottom: none; }
+.reminder { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid #edf0f4; }
+.reminder .rcount {
+  min-width: 30px; text-align: center; font-weight: 700; color: #fff;
+  background: #416a97; border-radius: 2px; padding: 1px 5px;
+}
+.reminder .rcount.alert { background: var(--red); }
+.reminder .rcount.zero { background: #9aa6b3; }
+.shortcut-list { list-style: none; margin: 0; padding: 0; }
+.shortcut-list li { padding: 3px 0; border-bottom: 1px solid #edf0f4; }
+.shortcut-list li:last-child { border-bottom: none; }
+
+/* ---- record pages ---- */
+.record { background: var(--panel); border: 1px solid var(--line); }
+.record-head {
+  background: linear-gradient(#e9eff6, #d8e2ec);
+  border-bottom: 1px solid var(--line);
+  padding: 8px 10px;
+  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
+}
+.record-head .rh-title { display: flex; flex-direction: column; gap: 2px; }
+.record-head h1 { margin: 0; font-size: 16px; font-weight: 700; color: #16283c; }
+.record-head .rh-sub { font-size: 11px; color: #46525f; }
+.record-head .rh-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
+
+.subtabs { display: flex; gap: 2px; background: var(--band); border-bottom: 1px solid var(--line); padding: 0 8px; overflow-x: auto; }
+.subtabs button {
+  background: #cfdbe7; border: 1px solid #b4c3d2; border-bottom: none;
+  font: inherit; font-size: 11px; color: #2b3a49; padding: 4px 12px; cursor: pointer;
+  margin-top: 4px; border-radius: 2px 2px 0 0; white-space: nowrap;
+}
+.subtabs button:hover { background: #dbe5ee; }
+.subtabs button[aria-selected="true"] { background: #fff; color: #12344f; font-weight: 700; border-color: var(--line); }
+
+.record-body { padding: 12px; }
+.fieldgroup { border: 1px solid var(--line-soft); margin-bottom: 12px; }
+.fieldgroup > h3 {
+  margin: 0; font-size: 11px; font-weight: 700; color: #2b3a49; text-transform: uppercase; letter-spacing: 0.03em;
+  background: var(--band-2); border-bottom: 1px solid var(--line-soft); padding: 4px 9px;
+}
+.fieldgroup .fg-body { padding: 10px; }
+.fieldcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 4px 26px; }
+.kvrow { display: flex; gap: 8px; padding: 3px 0; border-bottom: 1px solid #f0f2f5; }
+.kvrow dt { flex: 0 0 42%; color: #4b5763; font-weight: 600; margin: 0; }
+.kvrow dd { margin: 0; flex: 1 1 auto; word-break: break-word; }
+
+.totals { margin-left: auto; width: min(320px, 100%); }
+.totals .kvrow dt { flex: 0 0 55%; text-align: right; }
+.totals .kvrow dd { text-align: right; font-variant-numeric: tabular-nums; }
+.totals .kvrow.grand { border-top: 2px solid #b4c3d2; font-weight: 700; font-size: 13px; }
+
+.sublist { border: 1px solid var(--line); margin-bottom: 12px; }
+.sublist > header {
+  display: flex; align-items: center; gap: 8px;
+  background: var(--band); border-bottom: 1px solid var(--line); padding: 4px 9px;
+}
+.sublist > header h3 { margin: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #2b3a49; }
+.sublist > header .grow { margin-left: auto; }
+
+.formgrid .field.inline { grid-column: 1 / -1; }
+.formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 22px; }
+.linegrid input, .linegrid select { min-width: 70px; }
+.linegrid td { vertical-align: middle; }
+
+/* ---- SuiteQL tool ---- */
+.sql-editor { width: 100%; min-height: 130px; font-family: "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12px; }
+.sql-out { background: #11202f; color: #cfe3f5; padding: 10px; overflow: auto; max-height: 260px; font-size: 11px; }
+.sql-out pre { margin: 0; white-space: pre-wrap; word-break: break-word; }
+
+@media (max-width: 1080px) { .dash { grid-template-columns: 1fr 1fr; } }
+@media (max-width: 720px) {
+  .dash { grid-template-columns: 1fr; }
+  .record-head .rh-actions { margin-left: 0; }
+  .kvrow { flex-direction: column; gap: 0; }
+  .kvrow dt { flex: none; }
+}
+
+/* ---- home portlets added for the full dashboard: navigation tree, trend graph, snapshots, custom search, calendar ---- */
+.nav-root, .nav-tree { list-style: none; margin: 0; padding: 0; }
+.nav-root > li { border-bottom: 1px solid #edf0f4; }
+.nav-root > li:last-child { border-bottom: none; }
+.nav-branch { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 0; border: 0; background: none; font: inherit; font-weight: 700; color: #1b2a3a; cursor: pointer; text-align: left; }
+.nav-branch svg { transition: transform .12s; color: #5a6b7c; }
+.nav-branch[aria-expanded="false"] svg { transform: rotate(-90deg); }
+.nav-tree { padding: 0 0 4px 22px; columns: 2; column-gap: 12px; }
+.nav-tree li { break-inside: avoid; }
+.nav-link { display: block; padding: 2px 0; border: 0; background: none; font: inherit; font-size: 12px; color: var(--link, #1a5fb4); cursor: pointer; text-align: left; }
+.nav-link:hover { text-decoration: underline; }
+.nav-link.off { color: #4b5763; }
+.trend-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; margin-bottom: 2px; }
+svg.trend { display: block; width: 100%; height: auto; }
+svg.trend .axis { stroke: #b4c3d2; stroke-width: 1; }
+svg.trend .bar { fill: #6b9bd1; }
+svg.trend .bar.current { fill: #2e5f96; }
+svg.trend .tick { font-size: 10px; fill: #4b5763; }
+.snap-title { font-size: 12px; font-weight: 700; color: #1b2a3a; padding: 2px 0 4px; border-bottom: 1px solid #edf0f4; margin-bottom: 4px; }
+.snap-bars { list-style: none; margin: 0; padding: 0; font-size: 12px; }
+.snap-bars li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(60px, 1fr) auto; align-items: center; gap: 8px; padding: 3px 0; border-bottom: 1px solid #edf0f4; }
+.snap-bars li:last-child { border-bottom: none; }
+.snap-bars a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+svg.snap-track { width: 100%; height: 8px; display: block; background: #edf0f4; }
+svg.snap-track .snap-fill { fill: #6b9bd1; }
+.snap-bars .num { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
+table.search-results { width: 100%; border-collapse: collapse; font-size: 12px; }
+table.search-results th { text-align: left; font-weight: 700; color: #4b5763; padding: 3px 4px; border-bottom: 1px solid #b4c3d2; background: #f3f6f9; white-space: nowrap; }
+table.search-results td { padding: 3px 4px; border-bottom: 1px solid #edf0f4; vertical-align: top; }
+table.search-results td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
+table.search-results td.overdue { color: var(--red); font-weight: 700; }
+.cal-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; margin-bottom: 4px; }
+table.cal { width: 100%; border-collapse: collapse; font-size: 11px; text-align: center; table-layout: fixed; }
+table.cal th { font-weight: 700; color: #4b5763; padding: 2px 0; border-bottom: 1px solid #b4c3d2; }
+table.cal td { padding: 3px 0; border: 1px solid #edf0f4; height: 22px; }
+table.cal td.pad { background: #f7f9fb; }
+table.cal td.today { background: #2e5f96; color: #fff; font-weight: 700; }
+.portlet .btn-row { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

package/firedrill/tools/netsuite/app/site/styles/tables.css

@@ -0,0 +1,92 @@
+/* NetSuite list views: the blue header row, banded rows, the paging strip and the quick-filter bar. */
+.listview { background: var(--panel); border: 1px solid var(--line); }
+
+.listhead {
+  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
+  background: linear-gradient(#f4f6f9, #e6eaf0);
+  border-bottom: 1px solid var(--line);
+  padding: 7px 10px;
+}
+.listhead h1 { margin: 0; font-size: 15px; font-weight: 700; color: #1b2a3a; }
+.listhead .count { color: var(--ink-soft); font-size: 11px; }
+.listhead .grow { margin-left: auto; }
+
+.filterbar {
+  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
+  background: var(--band-2);
+  border-bottom: 1px solid var(--line-soft);
+  padding: 7px 10px;
+}
+.filterbar .field { margin: 0; }
+.filterbar input[type="search"], .filterbar input[type="text"], .filterbar select { min-width: 180px; width: auto; }
+
+.tabstrip { display: flex; gap: 0; background: var(--band-2); border-bottom: 1px solid var(--line); padding: 0 8px; }
+.tabstrip button {
+  background: none; border: none; border-bottom: 3px solid transparent;
+  font: inherit; font-size: 12px; color: #3d4957; padding: 6px 12px; cursor: pointer;
+}
+.tabstrip button:hover { color: var(--link); }
+.tabstrip button[aria-selected="true"] { color: #12344f; font-weight: 700; border-bottom-color: #2c4f7c; }
+
+.tablewrap { overflow-x: auto; }
+table.grid { width: 100%; border-collapse: collapse; font-size: 12px; }
+table.grid thead th {
+  background: linear-gradient(#5d84b0, #416a97);
+  color: #fff;
+  text-align: left;
+  font-weight: 700;
+  font-size: 11px;
+  padding: 5px 8px;
+  white-space: nowrap;
+  border-right: 1px solid #38618c;
+  position: sticky;
+  top: 0;
+}
+table.grid thead th:last-child { border-right: none; }
+table.grid thead th.num, table.grid td.num { text-align: right; }
+table.grid tbody td {
+  padding: 4px 8px;
+  border-bottom: 1px solid #e3e7ec;
+  vertical-align: top;
+}
+table.grid tbody tr:nth-child(even) { background: #f6f8fa; }
+table.grid tbody tr:hover { background: #fff6d9; }
+table.grid tbody tr.selected { background: #dcebfa; }
+table.grid td.tight { white-space: nowrap; }
+table.grid td .rowlink { font-weight: 600; }
+
+.pager {
+  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
+  background: var(--band-2);
+  border-top: 1px solid var(--line-soft);
+  padding: 6px 10px;
+  font-size: 11px;
+  color: #3d4957;
+}
+.pager .grow { margin-left: auto; }
+.pager select { width: auto; min-width: 64px; }
+
+.empty { padding: 26px 14px; text-align: center; color: var(--ink-soft); }
+.empty strong { display: block; color: var(--ink); font-size: 13px; margin-bottom: 3px; }
+
+.skeleton { height: 11px; background: linear-gradient(90deg, #e9edf2, #f5f7fa, #e9edf2); border-radius: 2px; }
+.sk-row td { padding: 6px 8px; }
+
+.banner { display: flex; gap: 8px; padding: 9px 11px; border: 1px solid; margin-bottom: 10px; align-items: flex-start; }
+.banner.error { background: #fdecea; border-color: #dda9a5; color: #7d1a17; }
+.banner.warn { background: #fdf5e2; border-color: #ddc78d; color: #6d4c06; }
+.banner.info { background: #eaf2fb; border-color: #a9c4e2; color: #1b4269; }
+.banner-title { font-weight: 700; }
+.banner-detail { margin-top: 2px; }
+
+.pill {
+  display: inline-block; padding: 0 7px; border-radius: 9px; font-size: 10px; font-weight: 700;
+  border: 1px solid; white-space: nowrap; line-height: 16px;
+}
+.pill.open { background: #e8f1fb; border-color: #a6c5e6; color: #14538e; }
+.pill.paid { background: #e8f5eb; border-color: #a3ceb1; color: var(--green); }
+.pill.pending { background: #fdf4e3; border-color: #ddc78d; color: var(--amber); }
+.pill.billing { background: #e4f3f4; border-color: #9dc9cd; color: var(--teal); }
+.pill.closed { background: #eceff2; border-color: #c3cbd6; color: var(--grey); }
+.pill.void { background: #eceff2; border-color: #c3cbd6; color: var(--grey); text-decoration: line-through; }
+.overdue { color: var(--red); font-weight: 700; }

package/firedrill/tools/netsuite/app/site/ui.js

@@ -0,0 +1,119 @@
+// Safe DOM helpers, operation calls, NetSuite formatting and banners. Record text only goes through textContent.
+import { invoke } from "/_firedrill/client.js";
+import { icon } from "./icons.js";
+
+export const $ = (sel, root = document) => root.querySelector(sel);
+export function el(tag, attrs = {}, children = []) {
+  const node = document.createElement(tag);
+  for (const [k, v] of Object.entries(attrs)) {
+    if (v === undefined || v === null || v === false) continue;
+    if (k === "class") node.className = v;
+    else if (k === "text") node.textContent = String(v);
+    else if (k.startsWith("on") && typeof v === "function") node.addEventListener(k.slice(2), v);
+    else if (k === "value") node.value = v;
+    else node.setAttribute(k, v === true ? "" : String(v));
+  }
+  for (const child of [].concat(children)) {
+    if (child === null || child === undefined || child === false) continue;
+    node.append(child instanceof Node ? child : document.createTextNode(String(child)));
+  }
+  return node;
+}
+export { icon };
+
+export class ToolError extends Error {
+  constructor(status, code, message, details) {
+    super(message);
+    this.status = status;
+    this.code = String(code ?? status);
+    this.details = details ?? {};
+  }
+  get denied() { return this.status === "denied"; }
+  is(code) { return this.code === code || this.code.endsWith(`.${code}`); }
+}
+
+let pending = 0;
+export const isPending = () => pending > 0;
+export async function call(operationId, args = {}, idempotencyKey) {
+  pending += 1;
+  try {
+    const result = await invoke(operationId, args, idempotencyKey ? { idempotencyKey } : {});
+    if (result.outcome.status !== "ok") {
+      const error = result.outcome.error ?? {};
+      throw new ToolError(
+        result.outcome.status,
+        error.code ?? result.outcome.status,
+        error.message ?? `The request was ${result.outcome.status}.`,
+        error.details,
+      );
+    }
+    return result.outcome.value;
+  } finally {
+    pending -= 1;
+  }
+}
+export const newKey = () => crypto.randomUUID();
+
+export function isDenied(error) {
+  return error instanceof ToolError && (error.denied || error.is("INSUFFICIENT_PERMISSION") || error.is("INVALID_LOGIN"));
+}
+export function describe(error) {
+  if (!(error instanceof ToolError)) return error?.message ?? "Something went wrong. Try again.";
+  if (error.denied) return "This Firedrill actor is not granted this NetSuite operation.";
+  if (error.is("CONCURRENCY_LIMIT_EXCEEDED")) return "Request limit exceeded. Wait a moment and try again.";
+  if (error.is("RESULT_SET_TOO_LARGE")) return `${error.message} Narrow the filter and try again.`;
+  return error.message;
+}
+
+// ---- formatting (calendar values come from world time through session.get, never the browser clock) ----
+const MONEY = new Intl.NumberFormat("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+export const money = (value, currency = "") => `${currency ? `${currency} ` : ""}${MONEY.format(Number(value) || 0)}`;
+export const qty = (value) => new Intl.NumberFormat("en-US", { maximumFractionDigits: 4 }).format(Number(value) || 0);
+/** "2026-05-12" → "5/12/2026", the account's M/D/YYYY date format. */
+export function mdy(date) {
+  const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(String(date ?? ""));
+  return m ? `${Number(m[2])}/${Number(m[3])}/${m[1]}` : "";
+}
+export function dayNum(date) {
+  const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(String(date ?? ""));
+  return m ? Math.floor(Date.UTC(Number(m[1]), Number(m[2]) - 1, Number(m[3])) / 86400000) : NaN;
+}
+export const addDays = (date, days) => {
+  const n = dayNum(date);
+  return Number.isNaN(n) ? date : new Date((n + days) * 86400000).toISOString().slice(0, 10);
+};
+export const dateOnly = (value) => String(value ?? "").slice(0, 10);
+/** Quote a value for the NetSuite `q` record-filter grammar. */
+export const lit = (text) => `"${String(text).replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`;
+
+// ---- banners, toasts, skeletons ----
+let toastTimer;
+export function toast(message, { error = false } = {}) {
+  const host = $("#toast");
+  host.replaceChildren(icon(error ? "alert" : "check", 16), el("span", { text: message }));
+  host.className = `toast ${error ? "error" : "success"}`;
+  host.hidden = false;
+  clearTimeout(toastTimer);
+  toastTimer = setTimeout(() => { host.hidden = true; }, error ? 9000 : 4000);
+}
+export function banner(kind, title, detail, extra) {
+  return el("div", { class: `banner ${kind}`, role: kind === "error" ? "alert" : "status" }, [
+    icon(kind === "info" ? "info" : kind === "warn" ? "lock" : "alert", 17),
+    el("div", {}, [
+      el("div", { class: "banner-title", text: title }),
+      detail ? el("div", { class: "banner-detail", text: detail }) : null,
+      extra ?? null,
+    ]),
+  ]);
+}
+export function errorBanner(error, title = "This request could not be completed") {
+  if (isDenied(error)) return banner("warn", "Permission Violation", describe(error));
+  return banner("error", title, describe(error));
+}
+export function emptyState(title, detail) {
+  return el("div", { class: "empty" }, [el("strong", { text: title }), detail ? el("div", { text: detail }) : null]);
+}
+export function skeletonRows(columns, rows = 8) {
+  return Array.from({ length: rows }, () =>
+    el("tr", { class: "sk-row" }, Array.from({ length: columns }, () => el("td", {}, el("div", { class: "skeleton" })))));
+}

package/firedrill/tools/netsuite/app/site/views/common.js

@@ -0,0 +1,134 @@
+// Page scaffolding shared by every screen: list views, the NetSuite paging strip, record headers,
+// field groups and the standard record button row.
+import { $, el, icon, money } from "../ui.js";
+import { notSimulated } from "../overlay.js";
+import { app, statusClass } from "../store.js";
+
+export function pill(status) {
+  const name = status?.refName ?? status ?? "";
+  return el("span", { class: `pill ${statusClass(name)}`, text: name });
+}
+
+export function link(text, href, extra = {}) {
+  return el("a", { href, text, ...extra });
+}
+
+export function toolbarButton(label, run, { kind = "", disabled = false, title } = {}) {
+  return el("button", { type: "button", class: `btn ${kind}`, text: label, disabled, title, onclick: run });
+}
+/** A control the real product shows here but this Tool does not implement. */
+export function nsButton(label, { kind = "" } = {}) {
+  return el("button", { type: "button", class: `btn ${kind}`, text: label, title: "Not simulated by this Tool", onclick: () => notSimulated(label) });
+}
+
+/** The NetSuite list-view frame: title row, optional filter bar, a grid body and the paging strip. */
+export function listShell({ title, subtitle, actions = [], filter, tabs, columns, body, pager }) {
+  const head = el("header", { class: "listhead" }, [
+    el("h1", { text: title }),
+    subtitle ? el("span", { class: "count", text: subtitle }) : null,
+    el("span", { class: "grow" }),
+    ...actions,
+  ]);
+  const table = el("table", { class: "grid" }, [
+    el("thead", {}, el("tr", {}, columns.map((column) =>
+      el("th", { class: column.numeric ? "num" : "", scope: "col", text: column.label })))),
+    body,
+  ]);
+  return el("section", { class: "listview" }, [
+    head,
+    tabs ?? null,
+    filter ?? null,
+    el("div", { class: "tablewrap" }, table),
+    pager ?? null,
+  ]);
+}
+
+/** NetSuite's "1 to 25 of 137" strip with page size, previous and next. */
+export function pagerStrip({ offset, shown, total, hasMore, pageSize, onOffset, onPageSize }) {
+  const from = total === 0 ? 0 : offset + 1;
+  const to = offset + shown;
+  const sizeId = "page-size";
+  return el("div", { class: "pager" }, [
+    el("label", { class: "fl", for: sizeId, text: "Rows per page" }),
+    el("select", {
+      id: sizeId,
+      onchange: (event) => onPageSize(Number(event.currentTarget.value)),
+    }, [10, 25, 50].map((size) => el("option", { value: String(size), text: String(size), selected: size === pageSize }))),
+    el("span", { class: "grow" }),
+    el("span", { text: `${from} to ${to} of ${total}` }),
+    el("button", {
+      type: "button", class: "btn", disabled: offset === 0, "aria-label": "Previous page",
+      onclick: () => onOffset(Math.max(0, offset - pageSize)),
+    }, [icon("chevronLeft", 14)]),
+    el("button", {
+      type: "button", class: "btn", disabled: !hasMore, "aria-label": "Next page",
+      onclick: () => onOffset(offset + pageSize),
+    }, [icon("chevronRight", 14)]),
+  ]);
+}
+
+/** Record page frame: the pale header band, the standard button row and a subtab strip. */
+export function recordShell({ title, subtitle, actions = [], subtabs, body }) {
+  return el("section", { class: "record" }, [
+    el("header", { class: "record-head" }, [
+      el("div", { class: "rh-title" }, [
+        el("h1", { text: title }),
+        subtitle ? el("span", { class: "rh-sub", text: subtitle }) : null,
+      ]),
+      el("div", { class: "rh-actions" }, actions),
+    ]),
+    subtabs ?? null,
+    el("div", { class: "record-body" }, body),
+  ]);
+}
+
+/** The Edit / Back / Actions / Print / Email / More row every NetSuite record page carries. */
+export function recordButtons({ onEdit, onBack, actions = [], editLabel = "Edit", editDisabled = false } = {}) {
+  const row = [];
+  if (onEdit) row.push(toolbarButton(editLabel, onEdit, { kind: "primary", disabled: editDisabled }));
+  if (onBack) row.push(toolbarButton("Back", onBack));
+  row.push(...actions, nsButton("Print"), nsButton("Email"), nsButton("More"));
+  return row;
+}
+
+export function subtabStrip(names, current, onSelect) {
+  return el("div", { class: "subtabs", role: "tablist" }, names.map((name) =>
+    el("button", {
+      type: "button", role: "tab", "aria-selected": String(name === current), text: name,
+      onclick: () => onSelect(name),
+    })));
+}
+
+export function fieldGroup(title, children) {
+  return el("section", { class: "fieldgroup" }, [
+    el("h3", { text: title }),
+    el("div", { class: "fg-body" }, children),
+  ]);
+}
+
+export function kv(label, value) {
+  return el("div", { class: "kvrow" }, [
+    el("dt", { text: label }),
+    el("dd", {}, value instanceof Node ? value : el("span", { text: value === undefined || value === null || value === "" ? "" : String(value) })),
+  ]);
+}
+
+export function kvColumns(...groups) {
+  return el("div", { class: "fieldcols" }, groups.map((rows) => el("dl", { class: "kvcol" }, rows)));
+}
+
+export function totalsBlock(rows) {
+  return el("dl", { class: "totals" }, rows.map(([label, value, grand]) =>
+    el("div", { class: `kvrow${grand ? " grand" : ""}` }, [el("dt", { text: label }), el("dd", { text: value })])));
+}
+
+export const amountCell = (value, currency) => el("td", { class: "num", text: money(value, currency) });
+
+/** Currency code of a record, falling back to the account's base currency. */
+export const currencyOf = (record) => record?.currency?.refName ?? app.session?.account?.baseCurrency ?? "";
+
+export function setPageTitle(text) {
+  document.title = `${text} · NetSuite (synthetic)`;
+}
+
+export const host = () => $("#main");