@signalk/app-dock 0.1.7 → 0.2.1

package/eslint.config.js

@@ -40,6 +40,7 @@ module.exports = [
         console: 'readonly',
         setTimeout: 'readonly',
         clearTimeout: 'readonly',
+        setInterval: 'readonly',
         requestAnimationFrame: 'readonly',
         Promise: 'readonly',
         Set: 'readonly',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signalk/app-dock",
-  "version": "0.1.7",
+  "version": "0.2.1",
   "description": "macOS-style configurable app dock for switching between SignalK webapps on touch screens",
   "repository": {
     "url": "https://github.com/SignalK/app-dock"

package/plugin/index.js

@@ -1,5 +1,32 @@
 'use strict'
 
+const DEFAULT_APPS = [
+  {
+    enabled: true,
+    autostart: true,
+    url: '/@signalk/freeboard-sk/',
+    label: 'Freeboard-SK',
+    icon: '/@signalk/freeboard-sk/assets/icons/icon-72x72.png',
+    color: ''
+  },
+  {
+    enabled: true,
+    autostart: false,
+    url: '/@mxtommy/kip/',
+    label: 'KIP',
+    icon: '/@mxtommy/kip/assets/icon-72x72.png',
+    color: ''
+  },
+  {
+    enabled: true,
+    autostart: false,
+    url: '/admin/',
+    label: 'Settings',
+    icon: '/@signalk/app-dock/icon-settings.svg',
+    color: '#78788c'
+  }
+]
+
 module.exports = (app) => {
   let pluginSettings = {}
   let resolvedApps = []
@@ -20,51 +47,52 @@ module.exports = (app) => {
     name: 'App Dock',
 
     start(settings) {
-      pluginSettings = settings
-
-      setTimeout(() => {
-        const discovered = getWebapps()
-        if (discovered.length === 0) return
-
-        const configured = settings.apps || []
-        const configuredUrls = new Set(configured.map((a) => a.url))
-
-        const merged = [...configured]
-        let added = false
-        for (const w of discovered) {
-          if (!configuredUrls.has(w.url)) {
-            merged.push({ enabled: true, url: w.url, label: '', icon: '', color: '' })
-            added = true
-          }
+      if (!Array.isArray(settings.apps)) {
+        const seeded = DEFAULT_APPS.map((a) => ({ ...a }))
+        const seededSettings = {
+          showNightModeButton: true,
+          showExitButton: false,
+          ...settings,
+          apps: seeded
         }
-
-        const discoveredByUrl = {}
-        discovered.forEach((d) => {
-          discoveredByUrl[d.url] = d
+        app.debug('App Dock: first run, seeding %d default apps', seeded.length)
+        app.savePluginOptions(seededSettings, (err) => {
+          if (err) app.error('App Dock: failed to save default apps: ' + err.message)
+          else app.debug('App Dock: saved default apps to config')
         })
+        settings = seededSettings
+      }
 
-        resolvedApps = merged
-          .filter((a) => a.enabled !== false)
-          .map((a) => {
-            const match = discoveredByUrl[a.url]
-            return {
-              label: a.label || (match && match.label) || a.url,
-              url: a.url,
-              icon: a.icon || (match && match.icon) || null,
-              color: a.color || null,
-              autostart: a.autostart || false
-            }
-          })
+      pluginSettings = settings
 
-        if (added) {
-          app.savePluginOptions({ ...settings, apps: merged }, (err) => {
-            if (err) app.error('Failed to save discovered apps: ' + err.message)
-            else app.debug('Auto-discovered new webapps, saved to config')
-          })
-        }
+      if (settings.showNightModeButton) {
+        app.registerPutHandler(
+          'vessels.self',
+          'environment.mode',
+          (context, path, value, _callback) => {
+            if (value !== 'day' && value !== 'night') {
+              return { state: 'COMPLETED', statusCode: 400, message: 'Invalid mode' }
+            }
+            app.handleMessage(plugin.id, {
+              updates: [{ values: [{ path: 'environment.mode', value }] }]
+            })
+            return { state: 'COMPLETED', statusCode: 200 }
+          },
+          plugin.id
+        )
+      }
 
-        app.debug('Dock apps: %s', resolvedApps.map((a) => a.label).join(', '))
-      }, 5000)
+      resolvedApps = (settings.apps || [])
+        .filter((a) => a.enabled !== false)
+        .map((a) => ({
+          label: a.label || a.url,
+          url: a.url,
+          icon: a.icon || null,
+          color: a.color || null,
+          autostart: a.autostart || false
+        }))
+
+      app.debug('App Dock: resolved %d apps: %s', resolvedApps.length, resolvedApps.map((a) => a.label).join(', '))
     },
 
     stop() {},
@@ -80,6 +108,24 @@ module.exports = (app) => {
       router.get('/webapps', (req, res) => {
         res.json(getWebapps())
       })
+
+      router.get('/mode', (req, res) => {
+        const current = app.getSelfPath('environment.mode')
+        res.json({ value: (current && current.value) || 'day' })
+      })
+
+      router.post('/dismiss-tour', (req, res) => {
+        const updated = { ...pluginSettings, tourDismissed: true }
+        app.savePluginOptions(updated, (err) => {
+          if (err) {
+            app.error('App Dock: failed to save tourDismissed: ' + err.message)
+            res.status(500).json({ error: err.message })
+            return
+          }
+          pluginSettings = updated
+          res.json({ tourDismissed: true })
+        })
+      })
     },
 
     schema: {
@@ -131,6 +177,28 @@ module.exports = (app) => {
           default: 1.7
         },
 
+        showNightModeButton: {
+          type: 'boolean',
+          title: 'Show night/day mode toggle',
+          description: 'Adds a sun/moon button to the dock that toggles environment.mode',
+          default: true
+        },
+
+        showExitButton: {
+          type: 'boolean',
+          title: 'Show exit button',
+          description: 'Adds an X button to the dock that returns to Signal K admin UI',
+          default: false
+        },
+
+        tourDismissed: {
+          type: 'boolean',
+          title: 'Welcome tour dismissed',
+          description:
+            'Set automatically when a user clicks "Don\'t show again" in the welcome tour. Uncheck to show the tour again on all devices.',
+          default: false
+        },
+
         apps: {
           type: 'array',
           title: 'Dock Apps',

package/public/805.js

@@ -1 +1 @@
-"use strict";(self.webpackChunk_signalk_app_dock=self.webpackChunk_signalk_app_dock||[]).push([[805],{805(e,t,a){a.r(t),a.d(t,{default:()=>s});var l=a(231);const n={root:{fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',color:"#333",padding:"16px 0"},sectionTitle:{fontSize:13,fontWeight:600,color:"#888",textTransform:"uppercase",letterSpacing:"0.05em",marginBottom:10,marginTop:24},btn:{display:"inline-flex",alignItems:"center",gap:8,padding:"8px 16px",border:"none",borderRadius:6,fontSize:13,fontWeight:600,cursor:"pointer"},btnPrimary:{background:"#3b82f6",color:"#fff"},btnSave:{background:"#10b981",color:"#fff"},btnDanger:{background:"#ef4444",color:"#fff",padding:"4px 10px",fontSize:11},status:{marginTop:8,fontSize:12,minHeight:18},item:{display:"flex",alignItems:"center",gap:10,padding:"8px 12px",background:"#f8f9fa",border:"1px solid #e0e0e0",borderRadius:8,marginBottom:6,cursor:"grab"},itemDisabled:{opacity:.4},dragOver:{borderColor:"#3b82f6",background:"#eef4ff"},handle:{color:"#bbb",fontSize:16,cursor:"grab",userSelect:"none",flexShrink:0,width:18,textAlign:"center"},iconBox:{width:36,height:36,borderRadius:8,display:"flex",alignItems:"center",justifyContent:"center",background:"#e2e8f0",overflow:"hidden",flexShrink:0,fontSize:18},iconImg:{width:"100%",height:"100%",objectFit:"contain",padding:5},info:{flex:1,minWidth:0},name:{fontSize:13,fontWeight:600,color:"#333"},url:{fontSize:10,color:"#999",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},toggle:{flexShrink:0},checkbox:{width:16,height:16,cursor:"pointer",accentColor:"#3b82f6"},preview:{display:"flex",alignItems:"flex-end",justifyContent:"center",gap:6,padding:"12px 18px",background:"rgba(30,30,32,0.85)",border:"1px solid rgba(255,255,255,0.18)",borderRadius:18,margin:"16px auto",width:"fit-content"},actions:{display:"flex",gap:10,alignItems:"center",marginTop:16},empty:{textAlign:"center",padding:"30px 16px",color:"#999",fontSize:13},fieldRow:{display:"flex",alignItems:"center",gap:12,marginBottom:10},label:{fontSize:13,fontWeight:500,color:"#555",width:160,flexShrink:0},select:{padding:"6px 10px",borderRadius:6,border:"1px solid #ccc",fontSize:13,background:"#fff",color:"#333"},input:{padding:"6px 10px",borderRadius:6,border:"1px solid #ccc",fontSize:13,width:80,background:"#fff",color:"#333"},checkboxField:{width:16,height:16,accentColor:"#3b82f6"},hint:{fontSize:11,color:"#aaa",marginLeft:8}};function o({icon:e,label:t,color:a,size:o}){const i=o||36,r={...n.iconBox,width:i,height:i,borderRadius:.22*i,...a?{background:a}:{}},c=e||"";return c.startsWith("/")||c.startsWith("http")?l.createElement("div",{style:r},l.createElement("img",{src:c,alt:t,style:{...n.iconImg,padding:.12*i},onError:e=>{e.target.style.display="none",e.target.parentNode.textContent=(t||"??").slice(0,2).toUpperCase()}})):l.createElement("div",{style:r},c||(t||"??").slice(0,2).toUpperCase())}function i({label:e,value:t,options:a,onChange:o,hint:i}){return l.createElement("div",{style:n.fieldRow},l.createElement("span",{style:n.label},e),l.createElement("select",{style:n.select,value:t,onChange:e=>o(e.target.value)},a.map(e=>l.createElement("option",{key:e.value,value:e.value},e.label))),i&&l.createElement("span",{style:n.hint},i))}function r({label:e,value:t,onChange:a,hint:o}){return l.createElement("div",{style:n.fieldRow},l.createElement("span",{style:n.label},e),l.createElement("input",{style:n.input,type:"number",value:t,onChange:e=>a(Number(e.target.value))}),o&&l.createElement("span",{style:n.hint},o))}function c({label:e,checked:t,onChange:a,hint:o}){return l.createElement("div",{style:n.fieldRow},l.createElement("span",{style:n.label},e),l.createElement("input",{type:"checkbox",style:n.checkboxField,checked:t,onChange:e=>a(e.target.checked)}),o&&l.createElement("span",{style:n.hint},o))}function s({configuration:e,save:t}){const a=e||{},[s,d]=(0,l.useState)(()=>a.apps||[]),[p,u]=(0,l.useState)(a.position||"bottom"),[g,m]=(0,l.useState)(a.triggerCorner||"bottom-right"),[b,f]=(0,l.useState)(a.iframeMode||"keep-alive"),[h,v]=(0,l.useState)(a.iconSize||56),[y,k]=(0,l.useState)(!1!==a.magnification),[E,S]=(0,l.useState)(a.magnificationScale||1.7),[x,C]=(0,l.useState)(""),[w,D]=(0,l.useState)(!1),[z,R]=(0,l.useState)(!1),[I,T]=(0,l.useState)(null),[A,B]=(0,l.useState)(null),W=(0,l.useRef)(s);W.current=s;const F=(0,l.useCallback)(e=>({position:p,triggerCorner:g,iframeMode:b,iconSize:h,magnification:y,magnificationScale:E,apps:e}),[p,g,b,h,y,E]),M=(0,l.useCallback)(()=>{t(F(s)),C("Saved!"),D(!1)},[s,F,t]),N=()=>B(null),$=()=>{T(null),B(null)},_=s.filter(e=>!1!==e.enabled);return l.createElement("div",{style:n.root},l.createElement("div",{style:n.sectionTitle},"Dock Settings"),l.createElement(i,{label:"Dock position",value:p,onChange:u,options:[{value:"bottom",label:"Bottom"},{value:"top",label:"Top"},{value:"left",label:"Left"},{value:"right",label:"Right"}]}),l.createElement(i,{label:"Double-tap corner",value:g,onChange:m,options:[{value:"bottom-right",label:"Bottom-right"},{value:"bottom-left",label:"Bottom-left"},{value:"top-right",label:"Top-right"},{value:"top-left",label:"Top-left"}]}),l.createElement(i,{label:"iFrame lifecycle",value:b,onChange:f,options:[{value:"keep-alive",label:"Keep-alive (faster switching, more RAM)"},{value:"destroy",label:"Destroy (reload each time, less RAM)"}]}),l.createElement(r,{label:"Icon size",value:h,onChange:v,hint:"px"}),l.createElement(c,{label:"Magnification effect",checked:y,onChange:k}),y&&l.createElement(r,{label:"Magnification scale",value:E,onChange:S,hint:"1.0 - 2.5"}),l.createElement("div",{style:n.sectionTitle},"Webapps"),l.createElement("button",{style:{...n.btn,...n.btnPrimary,...z?{opacity:.6}:{}},onClick:async()=>{R(!0),C(""),D(!1);try{const e=await fetch("/skServer/webapps"),t=(await e.json()).filter(e=>"@signalk/app-dock"!==e.name).map(e=>"@signalk/server-admin-ui"===e.name?{name:e.name,label:"Settings",url:"/admin/",icon:"/@signalk/app-dock/icon-settings.svg",isAdmin:!0}:{name:e.name,label:e.signalk?.displayName||e.name,url:`/${e.name}/`,icon:e.signalk?.appIcon?`/${e.name}/${e.signalk.appIcon}`:null});if(0===t.length)return C("No webapps found. Is the server fully started?"),D(!0),void R(!1);const a=W.current,l=new Set(a.map(e=>e.url));let n=0;const o=[...a];for(const e of t)l.has(e.url)||(o.push({enabled:!0,autostart:!1,url:e.url,label:e.label||"",icon:e.icon||"",color:e.isAdmin?"#78788c":""}),n++);d(o),C(n>0?`Found ${t.length} webapps, added ${n} new.`:`All ${t.length} webapps already in list.`),D(!1)}catch(e){C("Discovery failed: "+e.message),D(!0)}R(!1)},disabled:z},z?"Discovering…":"Discover Installed Webapps"),x&&l.createElement("div",{style:{...n.status,color:w?"#ef4444":"#10b981"}},x),l.createElement("div",{style:n.sectionTitle},"Dock Apps (drag to reorder)"),0===s.length?l.createElement("div",{style:n.empty},"No apps yet. Click Discover above."):l.createElement("div",null,s.map((e,t)=>l.createElement("div",{key:e.url+t,draggable:!0,onDragStart:()=>(e=>T(e))(t),onDragOver:e=>((e,t)=>{e.preventDefault(),B(t)})(e,t),onDragLeave:N,onDrop:e=>((e,t)=>{if(e.preventDefault(),B(null),null!==I&&I!==t){const e=[...s],[a]=e.splice(I,1);e.splice(t,0,a),d(e)}T(null)})(e,t),onDragEnd:$,style:{...n.item,...!1===e.enabled?n.itemDisabled:{},...A===t?n.dragOver:{},...I===t?{opacity:.4}:{}}},l.createElement("span",{style:n.handle},"≡"),l.createElement(o,{icon:e.icon,label:e.label||e.url,color:e.color}),l.createElement("div",{style:n.info},l.createElement("div",{style:n.name},e.label||e.url),l.createElement("div",{style:n.url},e.url)),l.createElement("div",{style:n.toggle,title:"Enabled"},l.createElement("input",{type:"checkbox",checked:!1!==e.enabled,onChange:()=>(e=>d(s.map((t,a)=>a===e?{...t,enabled:!t.enabled}:t)))(t),style:n.checkbox})),l.createElement("div",{style:{...n.toggle,cursor:"pointer",fontSize:16,opacity:e.autostart?1:.25},onClick:()=>(e=>d(s.map((t,a)=>a===e?{...t,autostart:!t.autostart}:{...t,autostart:!1})))(t),title:e.autostart?"Autostart: ON (click to disable)":"Click to set as autostart app"},"▶"),l.createElement("button",{style:{...n.btn,...n.btnDanger},onClick:()=>(e=>d(s.filter((t,a)=>a!==e)))(t)},"Remove")))),_.length>0&&l.createElement(l.Fragment,null,l.createElement("div",{style:n.sectionTitle},"Preview"),l.createElement("div",{style:n.preview},_.map((e,t)=>l.createElement(o,{key:t,icon:e.icon,label:e.label||e.url,color:e.color,size:40})))),l.createElement("div",{style:n.actions},l.createElement("button",{style:{...n.btn,...n.btnSave},onClick:M},"Save Configuration")))}}}]);
+"use strict";(self.webpackChunk_signalk_app_dock=self.webpackChunk_signalk_app_dock||[]).push([[805],{805(e,t,n){n.r(t),n.d(t,{default:()=>s});var a=n(231);const l={root:{fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',color:"#333",padding:"16px 0"},sectionTitle:{fontSize:13,fontWeight:600,color:"#888",textTransform:"uppercase",letterSpacing:"0.05em",marginBottom:10,marginTop:24},btn:{display:"inline-flex",alignItems:"center",gap:8,padding:"8px 16px",border:"none",borderRadius:6,fontSize:13,fontWeight:600,cursor:"pointer"},btnPrimary:{background:"#3b82f6",color:"#fff"},btnSave:{background:"#10b981",color:"#fff"},btnDanger:{background:"#ef4444",color:"#fff",padding:"4px 10px",fontSize:11},status:{marginTop:8,fontSize:12,minHeight:18},item:{display:"flex",alignItems:"center",gap:10,padding:"8px 12px",background:"#f8f9fa",border:"1px solid #e0e0e0",borderRadius:8,marginBottom:6,cursor:"grab"},itemDisabled:{opacity:.4},dragOver:{borderColor:"#3b82f6",background:"#eef4ff"},handle:{color:"#bbb",fontSize:16,cursor:"grab",userSelect:"none",flexShrink:0,width:18,textAlign:"center"},iconBox:{width:36,height:36,borderRadius:8,display:"flex",alignItems:"center",justifyContent:"center",background:"#e2e8f0",overflow:"hidden",flexShrink:0,fontSize:18},iconImg:{width:"100%",height:"100%",objectFit:"contain",padding:5},info:{flex:1,minWidth:0},name:{fontSize:13,fontWeight:600,color:"#333"},url:{fontSize:10,color:"#999",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},toggle:{flexShrink:0},checkbox:{width:16,height:16,cursor:"pointer",accentColor:"#3b82f6"},preview:{display:"flex",alignItems:"flex-end",justifyContent:"center",gap:6,padding:"12px 18px",background:"rgba(30,30,32,0.85)",border:"1px solid rgba(255,255,255,0.18)",borderRadius:18,margin:"16px auto",width:"fit-content"},actions:{display:"flex",gap:10,alignItems:"center",marginTop:16},empty:{textAlign:"center",padding:"30px 16px",color:"#999",fontSize:13},fieldRow:{display:"flex",alignItems:"center",gap:12,marginBottom:10},label:{fontSize:13,fontWeight:500,color:"#555",width:160,flexShrink:0},select:{padding:"6px 10px",borderRadius:6,border:"1px solid #ccc",fontSize:13,background:"#fff",color:"#333"},input:{padding:"6px 10px",borderRadius:6,border:"1px solid #ccc",fontSize:13,width:80,background:"#fff",color:"#333"},checkboxField:{width:16,height:16,accentColor:"#3b82f6"},hint:{fontSize:11,color:"#aaa",marginLeft:8}};function o({icon:e,label:t,color:n,size:o}){const i=o||36,r={...l.iconBox,width:i,height:i,borderRadius:.22*i,...n?{background:n}:{}},c=e||"";return c.startsWith("/")||c.startsWith("http")?a.createElement("div",{style:r},a.createElement("img",{src:c,alt:t,style:{...l.iconImg,padding:.12*i},onError:e=>{e.target.style.display="none",e.target.parentNode.textContent=(t||"??").slice(0,2).toUpperCase()}})):a.createElement("div",{style:r},c||(t||"??").slice(0,2).toUpperCase())}function i({label:e,value:t,options:n,onChange:o,hint:i}){return a.createElement("div",{style:l.fieldRow},a.createElement("span",{style:l.label},e),a.createElement("select",{style:l.select,value:t,onChange:e=>o(e.target.value)},n.map(e=>a.createElement("option",{key:e.value,value:e.value},e.label))),i&&a.createElement("span",{style:l.hint},i))}function r({label:e,value:t,onChange:n,hint:o}){return a.createElement("div",{style:l.fieldRow},a.createElement("span",{style:l.label},e),a.createElement("input",{style:l.input,type:"number",value:t,onChange:e=>n(Number(e.target.value))}),o&&a.createElement("span",{style:l.hint},o))}function c({label:e,checked:t,onChange:n,hint:o}){return a.createElement("div",{style:l.fieldRow},a.createElement("span",{style:l.label},e),a.createElement("input",{type:"checkbox",style:l.checkboxField,checked:t,onChange:e=>n(e.target.checked)}),o&&a.createElement("span",{style:l.hint},o))}function s({configuration:e,save:t}){const n=e||{},[s,d]=(0,a.useState)(()=>n.apps||[]),[u,g]=(0,a.useState)(n.position||"bottom"),[p,m]=(0,a.useState)(n.triggerCorner||"bottom-right"),[b,f]=(0,a.useState)(n.iframeMode||"keep-alive"),[h,v]=(0,a.useState)(n.iconSize||56),[y,k]=(0,a.useState)(!1!==n.magnification),[E,S]=(0,a.useState)(n.magnificationScale||1.7),[x,w]=(0,a.useState)(n.showNightModeButton||!1),[C,z]=(0,a.useState)(n.showExitButton||!1),[D,R]=(0,a.useState)(""),[B,T]=(0,a.useState)(!1),[I,F]=(0,a.useState)(!1),[A,M]=(0,a.useState)(!1),[N,W]=(0,a.useState)(null),[$,_]=(0,a.useState)(null),O=(0,a.useRef)(s);O.current=s;const U=(0,a.useRef)(null);(0,a.useEffect)(()=>()=>{U.current&&clearTimeout(U.current)},[]);const j=(0,a.useCallback)(e=>({position:u,triggerCorner:p,iframeMode:b,iconSize:h,magnification:y,magnificationScale:E,showNightModeButton:x,showExitButton:C,apps:e}),[u,p,b,h,y,E,x,C]),L=(0,a.useCallback)(async()=>{U.current&&clearTimeout(U.current),M(!0),R("Saving…"),T(!1);try{const e=t(j(s));e&&"function"==typeof e.then&&await e,R("Configuration saved — plugin will restart"),T(!1),U.current=setTimeout(()=>R(""),5e3)}catch(e){R("Save failed: "+(e.message||e)),T(!0)}finally{M(!1)}},[s,j,t]),P=()=>_(null),K=()=>{W(null),_(null)},H=s.filter(e=>!1!==e.enabled);return a.createElement("div",{style:l.root},a.createElement("div",{style:l.sectionTitle},"Dock Settings"),a.createElement(i,{label:"Dock position",value:u,onChange:g,options:[{value:"bottom",label:"Bottom"},{value:"top",label:"Top"},{value:"left",label:"Left"},{value:"right",label:"Right"}]}),a.createElement(i,{label:"Double-tap corner",value:p,onChange:m,options:[{value:"bottom-right",label:"Bottom-right"},{value:"bottom-left",label:"Bottom-left"},{value:"top-right",label:"Top-right"},{value:"top-left",label:"Top-left"}]}),a.createElement(i,{label:"iFrame lifecycle",value:b,onChange:f,options:[{value:"keep-alive",label:"Keep-alive (faster switching, more RAM)"},{value:"destroy",label:"Destroy (reload each time, less RAM)"}]}),a.createElement(r,{label:"Icon size",value:h,onChange:v,hint:"px"}),a.createElement(c,{label:"Magnification effect",checked:y,onChange:k}),y&&a.createElement(r,{label:"Magnification scale",value:E,onChange:S,hint:"1.0 - 2.5"}),a.createElement("div",{style:l.sectionTitle},"Utility Buttons"),a.createElement(c,{label:"Night/Day mode toggle",checked:x,onChange:w,hint:"Sun/moon button to toggle environment.mode"}),a.createElement(c,{label:"Exit button",checked:C,onChange:z,hint:"X button to return to Signal K admin UI"}),a.createElement("div",{style:l.sectionTitle},"Webapps"),a.createElement("button",{style:{...l.btn,...l.btnPrimary,...I?{opacity:.6}:{}},onClick:async()=>{F(!0),R(""),T(!1);try{const e=await fetch("/skServer/webapps"),t=(await e.json()).filter(e=>"@signalk/app-dock"!==e.name).map(e=>"@signalk/server-admin-ui"===e.name?{name:e.name,label:"Settings",url:"/admin/",icon:"/@signalk/app-dock/icon-settings.svg",isAdmin:!0}:{name:e.name,label:e.signalk?.displayName||e.name,url:`/${e.name}/`,icon:e.signalk?.appIcon?`/${e.name}/${e.signalk.appIcon}`:null});if(0===t.length)return R("No webapps found. Is the server fully started?"),T(!0),void F(!1);const n=O.current,a=new Set(n.map(e=>e.url));let l=0;const o=[...n];for(const e of t)a.has(e.url)||(o.push({enabled:!0,autostart:!1,url:e.url,label:e.label||"",icon:e.icon||"",color:e.isAdmin?"#78788c":""}),l++);d(o),R(l>0?`Found ${t.length} webapps, added ${l} new.`:`All ${t.length} webapps already in list.`),T(!1)}catch(e){R("Discovery failed: "+e.message),T(!0)}F(!1)},disabled:I},I?"Discovering…":"Discover Installed Webapps"),D&&a.createElement("div",{style:{...l.status,color:B?"#ef4444":"#10b981"}},D),a.createElement("div",{style:l.sectionTitle},"Dock Apps (drag to reorder)"),0===s.length?a.createElement("div",{style:l.empty},"No apps yet. Click Discover above."):a.createElement("div",null,s.map((e,t)=>a.createElement("div",{key:e.url+t,draggable:!0,onDragStart:()=>(e=>W(e))(t),onDragOver:e=>((e,t)=>{e.preventDefault(),_(t)})(e,t),onDragLeave:P,onDrop:e=>((e,t)=>{if(e.preventDefault(),_(null),null!==N&&N!==t){const e=[...s],[n]=e.splice(N,1);e.splice(t,0,n),d(e)}W(null)})(e,t),onDragEnd:K,style:{...l.item,...!1===e.enabled?l.itemDisabled:{},...$===t?l.dragOver:{},...N===t?{opacity:.4}:{}}},a.createElement("span",{style:l.handle},"≡"),a.createElement(o,{icon:e.icon,label:e.label||e.url,color:e.color}),a.createElement("div",{style:l.info},a.createElement("div",{style:l.name},e.label||e.url),a.createElement("div",{style:l.url},e.url)),a.createElement("div",{style:l.toggle,title:"Enabled"},a.createElement("input",{type:"checkbox",checked:!1!==e.enabled,onChange:()=>(e=>d(s.map((t,n)=>n===e?{...t,enabled:!t.enabled}:t)))(t),style:l.checkbox})),a.createElement("div",{style:{...l.toggle,cursor:"pointer",fontSize:16,opacity:e.autostart?1:.25},onClick:()=>(e=>d(s.map((t,n)=>n===e?{...t,autostart:!t.autostart}:{...t,autostart:!1})))(t),title:e.autostart?"Autostart: ON (click to disable)":"Click to set as autostart app"},"▶"),a.createElement("button",{style:{...l.btn,...l.btnDanger},onClick:()=>(e=>d(s.filter((t,n)=>n!==e)))(t)},"Remove")))),(H.length>0||x||C)&&a.createElement(a.Fragment,null,a.createElement("div",{style:l.sectionTitle},"Preview"),a.createElement("div",{style:l.preview},x&&a.createElement(a.Fragment,null,a.createElement("div",{style:{...l.iconBox,width:40,height:40,background:"rgba(255,255,255,0.08)",border:"1px solid rgba(255,255,255,0.12)",fontSize:20,borderRadius:10}},"☀️"),a.createElement("div",{style:{width:1,height:24,background:"rgba(255,255,255,0.15)",alignSelf:"center"}})),H.map((e,t)=>a.createElement(o,{key:t,icon:e.icon,label:e.label||e.url,color:e.color,size:40})),C&&a.createElement(a.Fragment,null,a.createElement("div",{style:{width:1,height:24,background:"rgba(255,255,255,0.15)",alignSelf:"center"}}),a.createElement("div",{style:{...l.iconBox,width:40,height:40,background:"rgba(255,255,255,0.08)",border:"1px solid rgba(255,255,255,0.12)",fontSize:16,borderRadius:10,color:"#fff"}},"✕")))),a.createElement("div",{style:l.actions},a.createElement("button",{style:{...l.btn,...l.btnSave,...A?{opacity:.6}:{}},onClick:L,disabled:A},A?"Saving…":"Save Configuration"),D&&a.createElement("div",{style:{...l.status,color:B?"#ef4444":"#10b981"}},D)))}}}]);

package/public/app-icon.svg

@@ -1,14 +1,16 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" width="72" height="72">
   <defs>
     <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0%" stop-color="#1e3a5f"/>
-      <stop offset="100%" stop-color="#0a1628"/>
+      <stop offset="0%" stop-color="#60a5fa"/>
+      <stop offset="100%" stop-color="#2563eb"/>
     </linearGradient>
   </defs>
+  <!-- White base -->
+  <rect width="72" height="72" fill="#ffffff"/>
   <!-- Background -->
   <rect width="72" height="72" rx="16" fill="url(#bg)"/>
   <!-- Dock pill -->
-  <rect x="8" y="48" width="56" height="16" rx="8" fill="#ffffff" fill-opacity="0.1" stroke="#ffffff" stroke-opacity="0.2" stroke-width="0.5"/>
+  <rect x="8" y="48" width="56" height="16" rx="8" fill="#ffffff" fill-opacity="0.25" stroke="#ffffff" stroke-opacity="0.4" stroke-width="0.5"/>
   <!-- Dock icons - 3 squares in the pill -->
   <rect x="14" y="51" width="10" height="10" rx="2.5" fill="#3b82f6" opacity="0.9"/>
   <rect x="31" y="51" width="10" height="10" rx="2.5" fill="#10b981" opacity="0.9"/>

package/public/dock.css

@@ -120,7 +120,7 @@ body {
 /* ─── Dock shell ────────────────────────────────────────────────────────────── */
 #dock {
   position: fixed;
-  z-index: 20;
+  z-index: 40;
   opacity: 0;
   pointer-events: none;
   transition:
@@ -359,6 +359,43 @@ body {
   transform: translateY(-50%);
 }
 
+/* ─── Dock separator ───────────────────────────────────────────────────────── */
+.dock-separator {
+  width: 1px;
+  height: 32px;
+  background: rgba(255, 255, 255, 0.15);
+  flex-shrink: 0;
+  align-self: center;
+  margin: 0 2px;
+  border-radius: 1px;
+}
+
+.layout-vertical .dock-separator {
+  width: 32px;
+  height: 1px;
+  margin: 2px 0;
+}
+
+/* ─── Utility buttons (night mode, exit) ───────────────────────────────────── */
+.dock-icon-utility {
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow: none;
+}
+
+.dock-item-utility .dock-dot {
+  display: none;
+}
+
+.dock-item-utility:hover .dock-icon-utility,
+.dock-item-utility.pressing .dock-icon-utility {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.dock-item-exit:hover .dock-icon-utility {
+  background: rgba(239, 68, 68, 0.25);
+}
+
 /* ─── Invisible corner trigger zone ────────────────────────────────────────── */
 #trigger-corner {
   position: fixed;
@@ -410,3 +447,115 @@ body {
     transform: rotate(360deg);
   }
 }
+
+/* ─── Welcome tour ─────────────────────────────────────────────────────────── */
+#tour-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 30;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+  padding: 24px;
+}
+
+#tour-overlay.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+#tour-card {
+  max-width: 520px;
+  width: 100%;
+  background: rgba(30, 30, 32, 0.9);
+  backdrop-filter: blur(40px) saturate(180%);
+  -webkit-backdrop-filter: blur(40px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 22px;
+  padding: 32px;
+  color: rgba(255, 255, 255, 0.92);
+  box-shadow:
+    0 24px 64px rgba(0, 0, 0, 0.6),
+    inset 0 0.5px 0 rgba(255, 255, 255, 0.15);
+  /* Position above the dock so user can see both */
+  margin-bottom: 180px;
+}
+
+#tour-title {
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  margin-bottom: 16px;
+}
+
+#tour-body {
+  font-size: 15px;
+  line-height: 1.55;
+  color: rgba(255, 255, 255, 0.78);
+}
+
+#tour-body p {
+  margin-bottom: 12px;
+}
+
+#tour-body p:last-child {
+  margin-bottom: 0;
+}
+
+#tour-link {
+  color: #60a5fa;
+  text-decoration: none;
+  font-weight: 600;
+}
+
+#tour-link:hover {
+  text-decoration: underline;
+}
+
+#tour-buttons {
+  display: flex;
+  gap: 10px;
+  margin-top: 24px;
+  justify-content: flex-end;
+}
+
+.tour-btn {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 10px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  font-family: inherit;
+  transition:
+    background 0.15s ease,
+    transform 0.1s ease;
+}
+
+.tour-btn-primary {
+  background: #3b82f6;
+  color: #fff;
+}
+
+.tour-btn-primary:hover {
+  background: #2563eb;
+}
+
+.tour-btn-dismiss {
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.tour-btn-dismiss:hover {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.tour-btn:active {
+  transform: scale(0.97);
+}

package/public/dock.js

@@ -8,6 +8,8 @@
     iconSize: 56,
     magnification: true,
     magnificationScale: 1.7,
+    showNightModeButton: false,
+    showExitButton: false,
     apps: []
   }
 
@@ -52,6 +54,48 @@
   let dockVisible = false
   const iframes = {}
 
+  // ─── Night mode state ────────────────────────────────────────────────────────
+  let currentMode = 'day'
+
+  async function fetchCurrentMode() {
+    try {
+      const res = await fetch('/plugins/signalk-app-dock/mode')
+      if (res.ok) {
+        const data = await res.json()
+        currentMode = data.value || 'day'
+        updateNightModeIcon()
+      }
+    } catch (e) {
+      console.warn('[Dock] Could not fetch environment.mode', e)
+    }
+  }
+
+  function updateNightModeIcon() {
+    const icon = document.querySelector('.dock-item-nightmode .dock-icon')
+    if (!icon) return
+    icon.textContent = currentMode === 'night' ? '\u{1F319}' : '\u2600\uFE0F'
+    const label = document.querySelector('.dock-item-nightmode .dock-label')
+    if (label) label.textContent = currentMode === 'night' ? 'Day mode' : 'Night mode'
+  }
+
+  async function toggleNightMode() {
+    await fetchCurrentMode()
+    const newMode = currentMode === 'night' ? 'day' : 'night'
+    try {
+      const res = await fetch('/signalk/v1/api/vessels/self/environment/mode', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ value: newMode })
+      })
+      if (res.ok) {
+        currentMode = newMode
+        updateNightModeIcon()
+      }
+    } catch (e) {
+      console.warn('[Dock] Failed to toggle mode', e)
+    }
+  }
+
   // ─── Apply dock position class & alignment ───────────────────────────────────
   const pos = cfg.position
   $dock.classList.add(`pos-${pos}`)
@@ -119,6 +163,55 @@
     }
   }
 
+  // ─── Utility item builder ─────────────────────────────────────────────────────
+  function createUtilityItem(className, icon, label, onClick) {
+    const sz = cfg.iconSize
+    const radius = Math.round(sz * 0.25) + 'px'
+    const lblCls = labelClass()
+
+    const $item = document.createElement('div')
+    $item.className = 'dock-item dock-item-utility ' + className
+
+    const $icon = document.createElement('div')
+    $icon.className = 'dock-icon dock-icon-utility'
+    $icon.style.width = sz + 'px'
+    $icon.style.height = sz + 'px'
+    $icon.style.borderRadius = radius
+    $icon.style.fontSize = Math.round(sz * 0.48) + 'px'
+    $icon.textContent = icon
+
+    const $dot = document.createElement('div')
+    $dot.className = 'dock-dot'
+
+    const $label = document.createElement('div')
+    $label.className = 'dock-label' + (lblCls ? ' ' + lblCls : '')
+    $label.textContent = label
+
+    $item.appendChild($icon)
+    $item.appendChild($dot)
+    $item.appendChild($label)
+
+    $item.addEventListener('touchstart', () => $item.classList.add('pressing'), { passive: true })
+    $item.addEventListener('touchend', () => $item.classList.remove('pressing'), { passive: true })
+    $item.addEventListener('touchcancel', () => $item.classList.remove('pressing'), { passive: true })
+
+    $item.addEventListener('click', (e) => {
+      if (magScrubbed) {
+        e.preventDefault()
+        return
+      }
+      onClick()
+    })
+
+    return $item
+  }
+
+  function createSeparator() {
+    const $sep = document.createElement('div')
+    $sep.className = 'dock-separator'
+    return $sep
+  }
+
   // ─── Build dock items ─────────────────────────────────────────────────────────
   function buildDock() {
     $dockInner.innerHTML = ''
@@ -126,6 +219,11 @@
     const radius = Math.round(sz * 0.25) + 'px'
     const lblCls = labelClass()
 
+    if (cfg.showNightModeButton) {
+      $dockInner.appendChild(createUtilityItem('dock-item-nightmode', '\u2600\uFE0F', 'Night mode', toggleNightMode))
+      $dockInner.appendChild(createSeparator())
+    }
+
     cfg.apps.forEach((app, i) => {
       const $item = document.createElement('div')
       $item.className = 'dock-item'
@@ -179,6 +277,17 @@
 
       $dockInner.appendChild($item)
     })
+
+    if (cfg.showExitButton) {
+      $dockInner.appendChild(createSeparator())
+      $dockInner.appendChild(
+        createUtilityItem('dock-item-exit', '\u2715', 'Exit to Admin', () => {
+          window.location.href = '/admin/'
+        })
+      )
+    }
+
+    if (cfg.showNightModeButton) updateNightModeIcon()
   }
 
   // ─── Magnification ───────────────────────────────────────────────────────────
@@ -311,6 +420,7 @@
 
   function hideDock() {
     if (!dockVisible) return
+    if ($tourOverlay && $tourOverlay.classList.contains('visible')) return
     dockVisible = false
     $dock.classList.remove('visible')
     $backdrop.classList.remove('visible')
@@ -447,6 +557,88 @@
   positionCornerZone()
   buildDock()
 
+  if (cfg.showNightModeButton) {
+    fetchCurrentMode()
+    setInterval(fetchCurrentMode, 5000)
+  }
+
+  async function refreshConfig() {
+    try {
+      const [configRes, settingsRes] = await Promise.all([
+        fetch('/plugins/signalk-app-dock/config'),
+        fetch('/plugins/signalk-app-dock/settings')
+      ])
+      const prev = JSON.stringify(cfg)
+      if (configRes.ok) {
+        const data = await configRes.json()
+        const pluginCfg = data.configuration || data
+        cfg = { ...DEFAULTS, ...pluginCfg }
+      }
+      if (settingsRes.ok) {
+        const data = await settingsRes.json()
+        if (Array.isArray(data.apps) && data.apps.length > 0) {
+          cfg.apps = data.apps
+        }
+      }
+      if (JSON.stringify(cfg) !== prev) {
+        buildDock()
+      }
+    } catch {
+      // ignore transient errors (e.g. during plugin restart)
+    }
+  }
+
+  setInterval(refreshConfig, 5000)
+
+  // ─── Welcome tour ────────────────────────────────────────────────────────────
+  const $tourOverlay = document.getElementById('tour-overlay')
+  const $tourGotIt = document.getElementById('tour-btn-got-it')
+  const $tourDismiss = document.getElementById('tour-btn-dismiss')
+
+  function hideTour() {
+    $tourOverlay.classList.remove('visible')
+    hideDock()
+  }
+
+  function showTour() {
+    $tourOverlay.classList.add('visible')
+    showDock()
+  }
+
+  if ($tourGotIt) $tourGotIt.addEventListener('click', hideTour)
+  if ($tourDismiss) {
+    $tourDismiss.addEventListener('click', async () => {
+      hideTour()
+      try {
+        await fetch('/plugins/signalk-app-dock/dismiss-tour', { method: 'POST' })
+      } catch {
+        // ignore network errors; worst case user sees the tour again next reload
+      }
+    })
+  }
+
+  const $tourLink = document.getElementById('tour-link')
+  if ($tourLink) {
+    $tourLink.addEventListener('click', (e) => {
+      e.preventDefault()
+      const adminUrl = '/admin/#/serverConfiguration/plugins/signalk-app-dock'
+      hideIdleHint()
+      const $frame = document.createElement('iframe')
+      $frame.allow = 'fullscreen; geolocation'
+      $frame.sandbox = 'allow-same-origin allow-scripts allow-forms allow-popups allow-pointer-lock'
+      $frame.style.touchAction = 'auto'
+      $frame.classList.add('active')
+      $iframeContainer.innerHTML = ''
+      Object.keys(iframes).forEach((k) => delete iframes[k])
+      $iframeContainer.appendChild($frame)
+      $frame.src = adminUrl
+      iframes[adminUrl] = $frame
+      hideTour()
+    })
+  }
+
+  if (!cfg.tourDismissed) showTour()
+
   const autostartIdx = cfg.apps.findIndex((a) => a.autostart)
   if (autostartIdx >= 0) {
     switchToApp(autostartIdx)

package/public/index.html

@@ -36,6 +36,29 @@
       <span id="loading-label"></span>
     </div>
 
+    <!-- First-run welcome tour -->
+    <div id="tour-overlay" aria-hidden="true">
+      <div id="tour-card" role="dialog" aria-labelledby="tour-title">
+        <div id="tour-title">Welcome to App Dock</div>
+        <div id="tour-body">
+          <p>App Dock gives you a macOS-style dock to quickly switch between Signal K webapps on touch screens.</p>
+          <p>
+            <strong>Double-tap the bottom-right corner</strong> of the screen to open the dock, then tap an icon to
+            launch that app.
+          </p>
+          <p>
+            Freeboard-SK is loading in the background and KIP is one tap away. Customize the apps, dock position, and
+            more in
+            <a id="tour-link" href="#">Plugin Config</a>.
+          </p>
+        </div>
+        <div id="tour-buttons">
+          <button id="tour-btn-got-it" class="tour-btn tour-btn-primary">Got it</button>
+          <button id="tour-btn-dismiss" class="tour-btn tour-btn-dismiss">Don't show again</button>
+        </div>
+      </div>
+    </div>
+
     <script src="dock.js"></script>
   </body>
 </html>

package/src/configpanel/PluginConfigurationPanel.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useCallback } from 'react'
+import React, { useState, useRef, useCallback, useEffect } from 'react'
 
 const S = {
   root: {
@@ -180,16 +180,26 @@ export default function PluginConfigurationPanel({ configuration, save }) {
   const [iconSize, setIconSize] = useState(cfg.iconSize || 56)
   const [magnification, setMagnification] = useState(cfg.magnification !== false)
   const [magnificationScale, setMagnificationScale] = useState(cfg.magnificationScale || 1.7)
+  const [showNightModeButton, setShowNightModeButton] = useState(cfg.showNightModeButton || false)
+  const [showExitButton, setShowExitButton] = useState(cfg.showExitButton || false)
 
   const [status, setStatus] = useState('')
   const [statusError, setStatusError] = useState(false)
   const [discovering, setDiscovering] = useState(false)
+  const [saving, setSaving] = useState(false)
   const [dragIdx, setDragIdx] = useState(null)
   const [overIdx, setOverIdx] = useState(null)
 
   const appsRef = useRef(apps)
   appsRef.current = apps
 
+  const statusTimeoutRef = useRef(null)
+  useEffect(() => {
+    return () => {
+      if (statusTimeoutRef.current) clearTimeout(statusTimeoutRef.current)
+    }
+  }, [])
+
   const buildConfig = useCallback(
     (appsList) => ({
       position,
@@ -198,15 +208,41 @@ export default function PluginConfigurationPanel({ configuration, save }) {
       iconSize,
       magnification,
       magnificationScale,
+      showNightModeButton,
+      showExitButton,
       apps: appsList
     }),
-    [position, triggerCorner, iframeMode, iconSize, magnification, magnificationScale]
+    [
+      position,
+      triggerCorner,
+      iframeMode,
+      iconSize,
+      magnification,
+      magnificationScale,
+      showNightModeButton,
+      showExitButton
+    ]
   )
 
-  const doSave = useCallback(() => {
-    save(buildConfig(apps))
-    setStatus('Saved!')
+  const doSave = useCallback(async () => {
+    if (statusTimeoutRef.current) clearTimeout(statusTimeoutRef.current)
+    setSaving(true)
+    setStatus('Saving\u2026')
     setStatusError(false)
+    try {
+      const result = save(buildConfig(apps))
+      if (result && typeof result.then === 'function') {
+        await result
+      }
+      setStatus('Configuration saved \u2014 plugin will restart')
+      setStatusError(false)
+      statusTimeoutRef.current = setTimeout(() => setStatus(''), 5000)
+    } catch (e) {
+      setStatus('Save failed: ' + (e.message || e))
+      setStatusError(true)
+    } finally {
+      setSaving(false)
+    }
   }, [apps, buildConfig, save])
 
   const discover = async () => {
@@ -355,6 +391,22 @@ export default function PluginConfigurationPanel({ configuration, save }) {
         />
       )}
 
+      <div style={S.sectionTitle}>Utility Buttons</div>
+
+      <CheckboxField
+        label="Night/Day mode toggle"
+        checked={showNightModeButton}
+        onChange={setShowNightModeButton}
+        hint="Sun/moon button to toggle environment.mode"
+      />
+
+      <CheckboxField
+        label="Exit button"
+        checked={showExitButton}
+        onChange={setShowExitButton}
+        hint="X button to return to Signal K admin UI"
+      />
+
       <div style={S.sectionTitle}>Webapps</div>
       <button
         style={{ ...S.btn, ...S.btnPrimary, ...(discovering ? { opacity: 0.6 } : {}) }}
@@ -420,21 +472,63 @@ export default function PluginConfigurationPanel({ configuration, save }) {
         </div>
       )}
 
-      {enabledApps.length > 0 && (
+      {(enabledApps.length > 0 || showNightModeButton || showExitButton) && (
         <>
           <div style={S.sectionTitle}>Preview</div>
           <div style={S.preview}>
+            {showNightModeButton && (
+              <>
+                <div
+                  style={{
+                    ...S.iconBox,
+                    width: 40,
+                    height: 40,
+                    background: 'rgba(255,255,255,0.08)',
+                    border: '1px solid rgba(255,255,255,0.12)',
+                    fontSize: 20,
+                    borderRadius: 10
+                  }}
+                >
+                  {'\u2600\uFE0F'}
+                </div>
+                <div style={{ width: 1, height: 24, background: 'rgba(255,255,255,0.15)', alignSelf: 'center' }} />
+              </>
+            )}
             {enabledApps.map((app, i) => (
               <IconPreview key={i} icon={app.icon} label={app.label || app.url} color={app.color} size={40} />
             ))}
+            {showExitButton && (
+              <>
+                <div style={{ width: 1, height: 24, background: 'rgba(255,255,255,0.15)', alignSelf: 'center' }} />
+                <div
+                  style={{
+                    ...S.iconBox,
+                    width: 40,
+                    height: 40,
+                    background: 'rgba(255,255,255,0.08)',
+                    border: '1px solid rgba(255,255,255,0.12)',
+                    fontSize: 16,
+                    borderRadius: 10,
+                    color: '#fff'
+                  }}
+                >
+                  {'\u2715'}
+                </div>
+              </>
+            )}
           </div>
         </>
       )}
 
       <div style={S.actions}>
-        <button style={{ ...S.btn, ...S.btnSave }} onClick={doSave}>
-          Save Configuration
+        <button
+          style={{ ...S.btn, ...S.btnSave, ...(saving ? { opacity: 0.6 } : {}) }}
+          onClick={doSave}
+          disabled={saving}
+        >
+          {saving ? 'Saving\u2026' : 'Save Configuration'}
         </button>
+        {status && <div style={{ ...S.status, color: statusError ? '#ef4444' : '#10b981' }}>{status}</div>}
       </div>
     </div>
   )

package/test/plugin.test.js

@@ -12,7 +12,10 @@ function createMockApp(webapps = []) {
     webapps,
     debug: () => {},
     error: () => {},
-    savePluginOptions: (opts, cb) => cb(null)
+    savePluginOptions: (opts, cb) => cb(null),
+    registerPutHandler: () => {},
+    handleMessage: () => {},
+    getSelfPath: () => null
   }
 }
 
@@ -74,6 +77,32 @@ describe('schema', () => {
     const items = plugin.schema.properties.apps.items
     assert.deepEqual(items.required, ['url'])
   })
+
+  it('defines showNightModeButton with default true', () => {
+    const plugin = pluginFactory(createMockApp())
+    const prop = plugin.schema.properties.showNightModeButton
+    assert.equal(prop.type, 'boolean')
+    assert.equal(prop.default, true)
+  })
+
+  it('defines showExitButton with default false', () => {
+    const plugin = pluginFactory(createMockApp())
+    const prop = plugin.schema.properties.showExitButton
+    assert.equal(prop.type, 'boolean')
+    assert.equal(prop.default, false)
+  })
+
+  it('triggerCorner defaults to bottom-right', () => {
+    const plugin = pluginFactory(createMockApp())
+    assert.equal(plugin.schema.properties.triggerCorner.default, 'bottom-right')
+  })
+
+  it('defines tourDismissed with default false', () => {
+    const plugin = pluginFactory(createMockApp())
+    const prop = plugin.schema.properties.tourDismissed
+    assert.equal(prop.type, 'boolean')
+    assert.equal(prop.default, false)
+  })
 })
 
 describe('webapp discovery', () => {
@@ -84,7 +113,8 @@ describe('webapp discovery', () => {
     const router = {
       get: (path, handler) => {
         routes[path] = handler
-      }
+      },
+      post: () => {}
     }
     plugin.registerWithRouter(router)
 
@@ -106,7 +136,8 @@ describe('webapp discovery', () => {
     const router = {
       get: (path, handler) => {
         routes[path] = handler
-      }
+      },
+      post: () => {}
     }
     plugin.registerWithRouter(router)
 
@@ -129,7 +160,8 @@ describe('webapp discovery', () => {
     const router = {
       get: (path, handler) => {
         routes[path] = handler
-      }
+      },
+      post: () => {}
     }
     plugin.registerWithRouter(router)
 
@@ -152,7 +184,8 @@ describe('webapp discovery', () => {
     const router = {
       get: (path, handler) => {
         routes[path] = handler
-      }
+      },
+      post: () => {}
     }
     plugin.registerWithRouter(router)
 
@@ -176,7 +209,8 @@ describe('settings endpoint', () => {
     const router = {
       get: (path, handler) => {
         routes[path] = handler
-      }
+      },
+      post: () => {}
     }
     plugin.registerWithRouter(router)
 
@@ -192,9 +226,9 @@ describe('settings endpoint', () => {
   })
 })
 
-describe('auto-discovery on start', () => {
-  it('merges discovered webapps into configured apps after delay', (t, done) => {
-    const app = createMockApp(MOCK_WEBAPPS)
+describe('default apps seeding', () => {
+  it('seeds default apps when config has no apps key', () => {
+    const app = createMockApp()
     let savedOptions = null
     app.savePluginOptions = (opts, cb) => {
       savedOptions = opts
@@ -202,73 +236,46 @@ describe('auto-discovery on start', () => {
     }
 
     const plugin = pluginFactory(app)
-
-    const originalSetTimeout = globalThis.setTimeout
-    globalThis.setTimeout = (fn) => fn()
-    try {
-      plugin.start({ apps: [] })
-    } finally {
-      globalThis.setTimeout = originalSetTimeout
-    }
+    plugin.start({})
 
     assert.ok(savedOptions)
-    assert.ok(savedOptions.apps.length >= 2)
-    assert.ok(savedOptions.apps.some((a) => a.url === '/@signalk/freeboard-sk/'))
-    assert.ok(savedOptions.apps.some((a) => a.url === '/@mxtommy/kip/'))
-    done()
+    assert.equal(savedOptions.apps[0].url, '/@signalk/freeboard-sk/')
+    assert.equal(savedOptions.apps[0].autostart, true)
+    assert.equal(savedOptions.apps[1].url, '/@mxtommy/kip/')
+    assert.equal(savedOptions.apps[1].autostart, false)
+    assert.equal(savedOptions.apps[2].url, '/admin/')
+    assert.equal(savedOptions.apps[2].label, 'Settings')
   })
 
-  it('does not duplicate already-configured apps', (t, done) => {
-    const app = createMockApp(MOCK_WEBAPPS)
-    let savedOptions = null
-    app.savePluginOptions = (opts, cb) => {
-      savedOptions = opts
-      cb(null)
+  it('does not seed when apps array already exists (even if empty)', () => {
+    const app = createMockApp()
+    let saveCalled = false
+    app.savePluginOptions = () => {
+      saveCalled = true
     }
 
     const plugin = pluginFactory(app)
-    const existing = [{ enabled: true, url: '/@signalk/freeboard-sk/', label: 'FB', icon: '', color: '' }]
-
-    const originalSetTimeout = globalThis.setTimeout
-    globalThis.setTimeout = (fn) => fn()
-    try {
-      plugin.start({ apps: existing })
-    } finally {
-      globalThis.setTimeout = originalSetTimeout
-    }
+    plugin.start({ apps: [] })
 
-    const fbEntries = savedOptions.apps.filter((a) => a.url === '/@signalk/freeboard-sk/')
-    assert.equal(fbEntries.length, 1)
-    assert.equal(fbEntries[0].label, 'FB')
-    done()
+    assert.equal(saveCalled, false)
   })
 
-  it('skips save when no new apps are discovered', () => {
-    const app = createMockApp(MOCK_WEBAPPS)
+  it('preserves existing configured apps', () => {
+    const app = createMockApp()
     let saveCalled = false
     app.savePluginOptions = () => {
       saveCalled = true
     }
 
     const plugin = pluginFactory(app)
-    const allConfigured = [
-      { enabled: true, url: '/@signalk/freeboard-sk/', label: '', icon: '', color: '' },
-      { enabled: true, url: '/@mxtommy/kip/', label: '', icon: '', color: '' }
-    ]
-
-    const originalSetTimeout = globalThis.setTimeout
-    globalThis.setTimeout = (fn) => fn()
-    try {
-      plugin.start({ apps: allConfigured })
-    } finally {
-      globalThis.setTimeout = originalSetTimeout
-    }
+    const existing = [{ enabled: true, url: '/custom-app/', label: 'Custom', icon: '', color: '' }]
+    plugin.start({ apps: existing })
 
     assert.equal(saveCalled, false)
   })
 
   it('respects enabled:false when resolving apps', () => {
-    const app = createMockApp(MOCK_WEBAPPS)
+    const app = createMockApp()
     app.savePluginOptions = (_, cb) => cb(null)
     const plugin = pluginFactory(app)
 
@@ -276,20 +283,14 @@ describe('auto-discovery on start', () => {
       { enabled: false, url: '/@signalk/freeboard-sk/', label: '', icon: '', color: '' },
       { enabled: true, url: '/@mxtommy/kip/', label: '', icon: '', color: '' }
     ]
-
-    const originalSetTimeout = globalThis.setTimeout
-    globalThis.setTimeout = (fn) => fn()
-    try {
-      plugin.start({ apps: configured })
-    } finally {
-      globalThis.setTimeout = originalSetTimeout
-    }
+    plugin.start({ apps: configured })
 
     const routes = {}
     const router = {
       get: (path, handler) => {
         routes[path] = handler
-      }
+      },
+      post: () => {}
     }
     plugin.registerWithRouter(router)
 
@@ -305,63 +306,196 @@ describe('auto-discovery on start', () => {
     assert.ok(!resolved.apps.some((a) => a.url === '/@signalk/freeboard-sk/'))
     assert.ok(resolved.apps.some((a) => a.url === '/@mxtommy/kip/'))
   })
+})
+
+describe('package.json', () => {
+  const pkg = JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'package.json'), 'utf-8'))
+
+  it('has signalk-node-server-plugin keyword', () => {
+    assert.ok(pkg.keywords.includes('signalk-node-server-plugin'))
+  })
+
+  it('has signalk-webapp keyword', () => {
+    assert.ok(pkg.keywords.includes('signalk-webapp'))
+  })
+
+  it('has signalk-plugin-configurator keyword', () => {
+    assert.ok(pkg.keywords.includes('signalk-plugin-configurator'))
+  })
+
+  it('main points to plugin/index.js', () => {
+    assert.equal(pkg.main, 'plugin/index.js')
+    assert.ok(fs.existsSync(path.join(__dirname, '..', pkg.main)))
+  })
+})
+
+describe('night mode PUT handler', () => {
+  it('registers PUT handler when showNightModeButton is true', () => {
+    let registered = false
+    const app = createMockApp()
+    app.registerPutHandler = (context, path, callback, sourceId) => {
+      registered = true
+      assert.equal(context, 'vessels.self')
+      assert.equal(path, 'environment.mode')
+      assert.equal(sourceId, 'signalk-app-dock')
+    }
 
-  it('uses discovered label/icon when config overrides are empty', () => {
-    const app = createMockApp(MOCK_WEBAPPS)
-    app.savePluginOptions = (_, cb) => cb(null)
     const plugin = pluginFactory(app)
+    const originalSetTimeout = globalThis.setTimeout
+    globalThis.setTimeout = (fn) => fn()
+    try {
+      plugin.start({ showNightModeButton: true, apps: [] })
+    } finally {
+      globalThis.setTimeout = originalSetTimeout
+    }
+    assert.ok(registered)
+  })
 
-    const configured = [{ enabled: true, url: '/@mxtommy/kip/', label: '', icon: '', color: '' }]
+  it('does not register PUT handler when showNightModeButton is false', () => {
+    let registered = false
+    const app = createMockApp()
+    app.registerPutHandler = () => {
+      registered = true
+    }
 
+    const plugin = pluginFactory(app)
     const originalSetTimeout = globalThis.setTimeout
     globalThis.setTimeout = (fn) => fn()
     try {
-      plugin.start({ apps: configured })
+      plugin.start({ showNightModeButton: false, apps: [] })
     } finally {
       globalThis.setTimeout = originalSetTimeout
     }
+    assert.equal(registered, false)
+  })
+
+  it('PUT handler accepts valid mode values and emits delta', () => {
+    const app = createMockApp()
+    let handlerCallback
+    let emittedDelta = null
+    app.registerPutHandler = (ctx, path, cb) => {
+      handlerCallback = cb
+    }
+    app.handleMessage = (id, delta) => {
+      emittedDelta = delta
+    }
 
-    const routes = {}
+    const plugin = pluginFactory(app)
+    const originalSetTimeout = globalThis.setTimeout
+    globalThis.setTimeout = (fn) => fn()
+    try {
+      plugin.start({ showNightModeButton: true, apps: [] })
+    } finally {
+      globalThis.setTimeout = originalSetTimeout
+    }
+
+    const result = handlerCallback('vessels.self', 'environment.mode', 'night', () => {})
+    assert.equal(result.state, 'COMPLETED')
+    assert.equal(result.statusCode, 200)
+    assert.equal(emittedDelta.updates[0].values[0].path, 'environment.mode')
+    assert.equal(emittedDelta.updates[0].values[0].value, 'night')
+  })
+
+  it('PUT handler rejects invalid mode values', () => {
+    const app = createMockApp()
+    let handlerCallback
+    app.registerPutHandler = (ctx, path, cb) => {
+      handlerCallback = cb
+    }
+
+    const plugin = pluginFactory(app)
+    const originalSetTimeout = globalThis.setTimeout
+    globalThis.setTimeout = (fn) => fn()
+    try {
+      plugin.start({ showNightModeButton: true, apps: [] })
+    } finally {
+      globalThis.setTimeout = originalSetTimeout
+    }
+
+    const result = handlerCallback('vessels.self', 'environment.mode', 'invalid', () => {})
+    assert.equal(result.statusCode, 400)
+  })
+})
+
+describe('dismiss-tour endpoint', () => {
+  it('saves tourDismissed: true and responds', (t, done) => {
+    const app = createMockApp()
+    let saved = null
+    app.savePluginOptions = (opts, cb) => {
+      saved = opts
+      cb(null)
+    }
+    const plugin = pluginFactory(app)
+    plugin.start({ apps: [], position: 'left' })
+
+    const routes = { get: {}, post: {} }
     const router = {
       get: (path, handler) => {
-        routes[path] = handler
+        routes.get[path] = handler
+      },
+      post: (path, handler) => {
+        routes.post[path] = handler
       }
     }
     plugin.registerWithRouter(router)
 
-    let resolved
-    routes['/settings'](
-      {},
-      {
-        json: (d) => {
-          resolved = d
-        }
+    const res = {
+      json: (data) => {
+        assert.equal(data.tourDismissed, true)
+        assert.equal(saved.tourDismissed, true)
+        assert.equal(saved.position, 'left')
+        done()
       }
-    )
-    const kip = resolved.apps.find((a) => a.url === '/@mxtommy/kip/')
-    assert.equal(kip.label, 'KIP Instrument MFD')
-    assert.equal(kip.icon, '/@mxtommy/kip/assets/icon-72x72.png')
+    }
+    routes.post['/dismiss-tour']({}, res)
   })
 })
 
-describe('package.json', () => {
-  const pkg = JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'package.json'), 'utf-8'))
-
-  it('has signalk-node-server-plugin keyword', () => {
-    assert.ok(pkg.keywords.includes('signalk-node-server-plugin'))
-  })
+describe('mode endpoint', () => {
+  it('returns day when no mode is set', (t, done) => {
+    const app = createMockApp()
+    const plugin = pluginFactory(app)
+    const routes = {}
+    const router = {
+      get: (path, handler) => {
+        routes[path] = handler
+      },
+      post: () => {}
+    }
+    plugin.registerWithRouter(router)
 
-  it('has signalk-webapp keyword', () => {
-    assert.ok(pkg.keywords.includes('signalk-webapp'))
+    const res = {
+      json: (data) => {
+        assert.equal(data.value, 'day')
+        done()
+      }
+    }
+    routes['/mode']({}, res)
   })
 
-  it('has signalk-plugin-configurator keyword', () => {
-    assert.ok(pkg.keywords.includes('signalk-plugin-configurator'))
-  })
+  it('returns current mode when set', (t, done) => {
+    const app = createMockApp()
+    app.getSelfPath = (path) => {
+      if (path === 'environment.mode') return { value: 'night' }
+      return null
+    }
+    const plugin = pluginFactory(app)
+    const routes = {}
+    const router = {
+      get: (path, handler) => {
+        routes[path] = handler
+      },
+      post: () => {}
+    }
+    plugin.registerWithRouter(router)
 
-  it('main points to plugin/index.js', () => {
-    assert.equal(pkg.main, 'plugin/index.js')
-    assert.ok(fs.existsSync(path.join(__dirname, '..', pkg.main)))
+    const res = {
+      json: (data) => {
+        assert.equal(data.value, 'night')
+        done()
+      }
+    }
+    routes['/mode']({}, res)
   })
 })