dsh-offwork 1.0.0 → 1.1.0

package/tests/pet-surfaces.test.mjs

@@ -0,0 +1,128 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { petViewport, petSurfaceWidth, placePetSurface } from '../pet-surfaces.js';
+import { petLayout } from '../pet-view.js';
+import { clampPosition } from '../ui-utils.js';
+const overlap = (a, b) =>
+  Math.max(0, Math.min(a.left + a.width, b.x + b.width) - Math.max(a.left, b.x)) *
+  Math.max(0, Math.min(a.top + a.height, b.y + b.height) - Math.max(a.top, b.y));
+
+test('visual viewport bounds include keyboard and zoom offsets, with a desktop fallback', () => {
+  assert.deepEqual(petViewport({ innerWidth: 1440, innerHeight: 900 }), {
+    width: 1440,
+    height: 900,
+    left: 0,
+    top: 0,
+  });
+  assert.deepEqual(
+    petViewport({
+      innerWidth: 800,
+      innerHeight: 900,
+      visualViewport: { width: 390, height: 310, offsetLeft: 20, offsetTop: 240 },
+    }),
+    { width: 390, height: 310, left: 20, top: 240 },
+  );
+});
+test('card widths match content needs and shrink to the available viewport', () => {
+  const wide = { width: 1440, height: 900 };
+  assert.ok(petSurfaceWidth('schedule', wide) > petSurfaceWidth('income', wide));
+  assert.ok(petSurfaceWidth('menu', wide) < petSurfaceWidth('home', wide));
+  for (const name of ['home', 'income', 'earnings', 'water', 'appearance', 'schedule'])
+    assert.equal(petSurfaceWidth(name, { width: 320, height: 568 }), 296);
+});
+test('measured surfaces stay inside every viewport and preserve natural height when there is room', () => {
+  for (const viewport of [
+    { width: 1440, height: 900 },
+    { width: 768, height: 1024 },
+    { width: 320, height: 568 },
+    { width: 640, height: 320 },
+    { width: 240, height: 140 },
+    { width: 390, height: 280, left: 80, top: 220 },
+  ])
+    for (const position of [null, { x: 0, y: 0 }, { x: 9999, y: 9999 }])
+      for (const size of [80, 180])
+        for (const height of [42, 230, 480, 1500])
+          for (const kind of ['card', 'menu']) {
+            const p = petLayout(position, viewport, size);
+            const anchor = { x: p.x, y: p.y, width: p.petWidth, height: p.petHeight };
+            const r = placePetSurface(anchor, viewport, {
+              width: petSurfaceWidth(kind === 'menu' ? 'menu' : 'schedule', viewport),
+              height,
+              kind,
+              point: { x: p.x, y: p.y },
+            });
+            assert.ok(r.left >= (viewport.left ?? 0) && r.top >= (viewport.top ?? 0));
+            assert.ok(r.left + r.width <= (viewport.left ?? 0) + viewport.width + 0.01);
+            assert.ok(r.top + r.height <= (viewport.top ?? 0) + viewport.height + 0.01);
+            assert.ok(r.height <= height);
+          }
+  const r = placePetSurface(
+    { x: 1100, y: 500, width: 160, height: 176 },
+    { width: 1440, height: 900 },
+    { width: 320, height: 230 },
+  );
+  assert.equal(r.height, 230);
+});
+test('cards and menus avoid the character whenever a clear side is available', () => {
+  const viewport = { width: 1440, height: 900 };
+  for (const anchor of [
+    { x: 1100, y: 650, width: 160, height: 176 },
+    { x: 12, y: 12, width: 160, height: 176 },
+  ])
+    for (const kind of ['card', 'menu']) {
+      const r = placePetSurface(anchor, viewport, {
+        width: 360,
+        height: 500,
+        kind,
+        point: { x: anchor.x + 80, y: anchor.y + 80 },
+      });
+      assert.equal(overlap(r, anchor), 0);
+    }
+});
+test('content changes keep the header in place until bounds require movement', () => {
+  const anchor = { x: 1100, y: 600, width: 160, height: 176 },
+    viewport = { width: 1440, height: 1000 };
+  const first = placePetSurface(anchor, viewport, { width: 336, height: 200 });
+  const larger = placePetSurface(anchor, viewport, { width: 336, height: 240, previous: first });
+  assert.equal(larger.top, first.top);
+  assert.equal(larger.left, first.left);
+  assert.equal(larger.height, 240);
+  const tall = placePetSurface(anchor, viewport, { width: 336, height: 1400, previous: larger });
+  assert.ok(tall.top + tall.height <= 988);
+});
+test('menus open near a clicked card rather than jumping back to the pet', () => {
+  const r = placePetSurface(
+    { x: 1100, y: 700, width: 148, height: 176 },
+    { width: 1440, height: 1000 },
+    { width: 224, height: 240, kind: 'menu', point: { x: 300, y: 100 } },
+  );
+  assert.equal(r.left, 308);
+  assert.equal(r.top, 108);
+});
+
+test('water notices avoid the open card as well as the pet', () => {
+  const viewport = { width: 320, height: 568 };
+  const anchor = { x: 140, y: 414, width: 148, height: 118 };
+  const card = { left: 12, top: 12, width: 296, height: 390 };
+  const notice = placePetSurface(anchor, viewport, {
+    width: 116,
+    height: 34,
+    kind: 'menu',
+    obstacles: [card],
+  });
+  assert.equal(overlap(notice, anchor), 0);
+  assert.equal(
+    overlap(notice, { x: card.left, y: card.top, width: card.width, height: card.height }),
+    0,
+  );
+});
+
+test('pet drag clamping and surface placement use the same offset coordinate space', () => {
+  const viewport = { width: 390, height: 310, left: 80, top: 240 };
+  const position = clampPosition({ x: -50, y: 9999 }, viewport, { width: 148, height: 176 });
+  assert.equal(position.x, 92);
+  assert.equal(position.y, 362);
+  const pet = petLayout(position, viewport, 132);
+  assert.equal(pet.x, 92);
+  assert.equal(pet.y, 362);
+});

package/tests/pet-view.test.mjs

@@ -0,0 +1,48 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { petLayout } from '../pet-view.js';
+import { normalizeView } from '../ui-utils.js';
+
+test('pet and popover stay on screen at edges, across sizes and narrow viewports', () => {
+  for (const viewport of [
+    { width: 1440, height: 900 },
+    { width: 390, height: 844 },
+    { width: 320, height: 568 },
+    { width: 280, height: 360 },
+    { width: 320, height: 160 },
+    { width: 800, height: 120 },
+  ]) {
+    for (const size of [80, 132, 180])
+      for (const position of [null, { x: -500, y: -500 }, { x: 9999, y: 9999 }, { x: 120, y: 80 }])
+        for (const height of [120, 420, 900]) {
+          const r = petLayout(position, viewport, size, height);
+          assert.ok(r.x >= 0 && r.x + r.petWidth <= viewport.width);
+          assert.ok(r.y >= 0 && r.y + r.petHeight <= viewport.height);
+          assert.ok(r.panel.left >= 0 && r.panel.left + r.panel.width <= viewport.width);
+          assert.ok(
+            r.panel.top >= 0 &&
+              r.panel.top + Math.min(height, r.panel.maxHeight) <= viewport.height,
+          );
+        }
+  }
+});
+
+test('popover flips to the available side and stacks on a phone', () => {
+  assert.equal(petLayout(null, { width: 1440, height: 900 }).panel.side, 'left');
+  assert.equal(petLayout({ x: 12, y: 200 }, { width: 1440, height: 900 }).panel.side, 'right');
+  assert.equal(petLayout(null, { width: 320, height: 568 }).panel.side, 'above');
+  assert.equal(petLayout({ x: 12, y: 12 }, { width: 320, height: 568 }).panel.side, 'below');
+});
+
+test('pet preferences retain the original clock position and bound invalid size input', () => {
+  const old = { position: { x: 40, y: 50 }, masked: true, companion: true, opacity: 0.6 };
+  const next = normalizeView(old);
+  assert.deepEqual(next.position, old.position);
+  assert.equal(next.petPosition, null);
+  assert.equal(next.petSize, 132);
+  const saved = normalizeView({ ...next, petPosition: { x: 200, y: 300 }, petSize: 148 });
+  assert.deepEqual(normalizeView(JSON.parse(JSON.stringify(saved))), saved);
+  assert.equal(normalizeView({ petSize: 9000 }).petSize, 180);
+  assert.equal(normalizeView({ petSize: NaN }).petSize, 132);
+  assert.equal(normalizeView({ petPosition: { x: 'bad', y: 4 } }).petPosition, null);
+});

package/tests/ui.test.mjs

@@ -1,25 +1,73 @@
 import test from 'node:test';
 import assert from 'node:assert/strict';
 import { readFile } from 'node:fs/promises';
-import { formatDuration, clampPosition, normalizeView, clampOpacity, decodeCommand, changedSettings } from '../ui-utils.js';
+import {
+  formatDuration,
+  clampPosition,
+  normalizeView,
+  clampOpacity,
+  decodeCommand,
+  changedSettings,
+} from '../ui-utils.js';
 test('duration rounds countdown upward and supports >24 hours', () => {
-  assert.equal(formatDuration(0), '00:00:00'); assert.equal(formatDuration(3661), '01:01:01');
-  assert.equal(formatDuration(.1), '00:00:01'); assert.equal(formatDuration(90000), '25:00:00');
-  assert.equal(formatDuration(NaN), '--:--:--'); assert.equal(formatDuration(-1), '--:--:--');
+  assert.equal(formatDuration(0), '00:00:00');
+  assert.equal(formatDuration(3661), '01:01:01');
+  assert.equal(formatDuration(0.1), '00:00:01');
+  assert.equal(formatDuration(90000), '25:00:00');
+  assert.equal(formatDuration(NaN), '--:--:--');
+  assert.equal(formatDuration(-1), '--:--:--');
 });
 test('position stays visible when viewport shrinks', () => {
-  assert.deepEqual(clampPosition({ x: 9000, y: -20 }, { width: 800, height: 600 }, { width: 330, height: 400 }), { x: 458, y: 12 });
-  assert.deepEqual(clampPosition(null, { width: 200, height: 200 }, { width: 330, height: 400 }), { x: 12, y: 12 });
+  assert.deepEqual(
+    clampPosition({ x: 9000, y: -20 }, { width: 800, height: 600 }, { width: 330, height: 400 }),
+    { x: 458, y: 12 },
+  );
+  assert.deepEqual(clampPosition(null, { width: 200, height: 200 }, { width: 330, height: 400 }), {
+    x: 12,
+    y: 12,
+  });
 });
-test('view defaults: compact, salary hidden, 82% glass', () => {
-  assert.deepEqual(normalizeView(null), { mini: true, masked: true, opacity: 0.82, position: null });
-  assert.deepEqual(normalizeView({ mini: false, masked: false, opacity: 0.5, position: { x: 1, y: 2 } }),
-    { mini: false, masked: false, opacity: 0.5, position: { x: 1, y: 2 } });
+test('view defaults: compact, salary hidden, 82% glass and companion enabled', () => {
+  assert.deepEqual(normalizeView(null), {
+    petModel: 'whale-dress',
+    petSize: 132,
+    petPosition: null,
+    mini: true,
+    masked: true,
+    companion: true,
+    companionMotion: true,
+    opacity: 0.82,
+    position: null,
+  });
+  assert.deepEqual(
+    normalizeView({ mini: false, masked: false, opacity: 0.5, position: { x: 1, y: 2 } }),
+    {
+      petSize: 132,
+      petModel: 'whale-dress',
+      petPosition: null,
+      mini: false,
+      masked: false,
+      companion: true,
+      companionMotion: true,
+      opacity: 0.5,
+      position: { x: 1, y: 2 },
+    },
+  );
   assert.equal(normalizeView({ mini: 'yes' }).mini, true);
   assert.equal(normalizeView({ masked: 'false' }).masked, true);
 });
 test('malformed positions and opacity are repaired, not trusted', () => {
-  assert.deepEqual(normalizeView({ mini: 'yes', masked: true, position: { x: 'oops', y: 2 } }), { mini: true, masked: true, opacity: 0.82, position: null });
+  assert.deepEqual(normalizeView({ mini: 'yes', masked: true, position: { x: 'oops', y: 2 } }), {
+    petModel: 'whale-dress',
+    petSize: 132,
+    petPosition: null,
+    mini: true,
+    masked: true,
+    companion: true,
+    companionMotion: true,
+    opacity: 0.82,
+    position: null,
+  });
   assert.equal(normalizeView({ opacity: 0 }).opacity, 0.3);
   assert.equal(normalizeView({ opacity: 9 }).opacity, 1);
   assert.equal(normalizeView({ opacity: 'x' }).opacity, 0.82);
@@ -31,25 +79,52 @@ test('salary stays hidden until explicitly revealed, including on first paint',
   assert.equal(normalizeView({ masked: false }).masked, false);
 });
 test('RPC decodes every failure layer and real command envelopes', () => {
-  const response = (data, kind = 'success') => ({ ok: true, value: { result: { kind, text: JSON.stringify(data) } } });
-  assert.deepEqual(decodeCommand(response({ ok: true, settings: { monthlySalary: 1000 }, configured: true })).settings, { monthlySalary: 1000 });
-  assert.throws(() => decodeCommand({ ok: false, error: { message: 'permission denied' } }), /permission denied/);
+  const response = (data, kind = 'success') => ({
+    ok: true,
+    value: { result: { kind, text: JSON.stringify(data) } },
+  });
+  assert.deepEqual(
+    decodeCommand(response({ ok: true, settings: { monthlySalary: 1000 }, configured: true }))
+      .settings,
+    { monthlySalary: 1000 },
+  );
+  assert.throws(
+    () => decodeCommand({ ok: false, error: { message: 'permission denied' } }),
+    /permission denied/,
+  );
   assert.throws(() => decodeCommand({ ok: true }), /Command unavailable/);
-  assert.throws(() => decodeCommand(response({ ok: false, error: 'bad shift' }, 'error')), /bad shift/);
-  assert.throws(() => decodeCommand({ ok: true, value: { result: { kind: 'success', text: 'oops' } } }), /Invalid/);
+  assert.throws(
+    () => decodeCommand(response({ ok: false, error: 'bad shift' }, 'error')),
+    /bad shift/,
+  );
+  assert.throws(
+    () => decodeCommand({ ok: true, value: { result: { kind: 'success', text: 'oops' } } }),
+    /Invalid/,
+  );
 });
 test('partial saves preserve unrelated edits from another caller', () => {
-  assert.deepEqual(changedSettings({ salary: 1, days: [1, 2], start: '09:00' }, { salary: 2, days: [1, 2], start: '09:00' }), { salary: 2 });
+  assert.deepEqual(
+    changedSettings(
+      { salary: 1, days: [1, 2], start: '09:00' },
+      { salary: 2, days: [1, 2], start: '09:00' },
+    ),
+    { salary: 2 },
+  );
 });
 test('Client uses the exact tested engine and a single surface', async () => {
   const source = await readFile(new URL('../client.source.js', import.meta.url), 'utf8');
   const built = await readFile(new URL('../client.js', import.meta.url), 'utf8');
-  const engine = (await readFile(new URL('../clock.js', import.meta.url), 'utf8')).replace(/^export /gm, '');
+  const engine = (await readFile(new URL('../clock.js', import.meta.url), 'utf8')).replace(
+    /^export /gm,
+    '',
+  );
   assert.ok(built.includes(engine));
   assert.match(source, /prefers-reduced-motion:reduce/);
   assert.match(source, /prefers-reduced-transparency:reduce/);
-  assert.match(source, /visibilitychange/); assert.match(source, /removeEventListener\('storage'/);
-  assert.match(source, /ro\?\.disconnect/); assert.match(source, /generation\.current/);
+  assert.match(source, /visibilitychange/);
+  assert.match(source, /removeEventListener\('storage'/);
+  assert.match(source, /ro\?\.disconnect/);
+  assert.match(source, /generation\.current/);
   assert.doesNotMatch(source, /document\.body|window\.open|fetch\(/);
   assert.match(source, /money\(safeState\.earned\)/);
   assert.match(source, /owc-glass/);
@@ -64,7 +139,9 @@ test('compact strip stacks time above amount', async () => {
   assert.match(css, /flex-direction:column/);
   assert.match(source, /className: 'owc-pill-top'/);
   assert.match(source, /className: 'owc-pill-bottom'/);
-  assert.ok(source.indexOf("className: 'owc-pill-time'") < source.indexOf("className: 'owc-pill-money'"));
+  assert.ok(
+    source.indexOf("className: 'owc-pill-time'") < source.indexOf("className: 'owc-pill-money'"),
+  );
 });
 test('compact strip keeps both drag surface and expand action; panel keeps collapse', async () => {
   const source = await readFile(new URL('../client.source.js', import.meta.url), 'utf8');

package/tools/build.mjs

@@ -1,13 +1,58 @@
 import { readFile, writeFile } from 'node:fs/promises';
+
 const root = new URL('../', import.meta.url);
-const [entry, clock, utils] = await Promise.all(['client.source.js','clock.js','ui-utils.js'].map(name=>readFile(new URL(name,root),'utf8')));
-if (entry.split('/* PURE_MODULES */').length !== 2) throw new Error('Expected exactly one pure-module marker');
-const pure = [clock,utils].map(text=>text.replace(/^export /gm,'')).join('\n');
-const result = '// Generated by tools/build.mjs; edit client.source.js, clock.js or ui-utils.js.\n'+entry.replace('/* PURE_MODULES */',pure);
-if(process.argv.includes('--check')) {
-  if(await readFile(new URL('client.js',root),'utf8')!==result) throw new Error('Client artifact is stale');
+const moduleNames = [
+  'client.source.js',
+  'clock.js',
+  'ui-utils.js',
+  'companion.js',
+  'pet-view.js',
+  'pet-interactions.js',
+  'pet-surfaces.js',
+  'hydration.js',
+  'hydration-store.js',
+];
+const [entry, ...modules] = await Promise.all(
+  moduleNames.map((name) => readFile(new URL(name, root), 'utf8')),
+);
+const marker = '/* PURE_MODULES */';
+if (entry.split(marker).length !== 2) {
+  throw new Error('Expected exactly one pure-module marker in client.source.js');
+}
+
+// Embed the tested modules, removing only their internal module wiring.
+// The browser and Node.js tests execute the same calculation and store code.
+const pure = modules
+  .map((source) =>
+    source.replace(/^import .* from '\.\/hydration\.js';\n/gm, '').replace(/^export /gm, ''),
+  )
+  .join('\n');
+const banner = '// Generated by tools/build.mjs; edit the source modules, not this file.\n';
+const spriteMarker = '/* PET_SPRITES */';
+if (entry.split(spriteMarker).length !== 2) throw new Error('Expected one sprite marker');
+const sprites = Object.fromEntries(
+  await Promise.all(
+    ['whale-dress', 'whale-ornate'].map(async (id) => {
+      const bytes = await readFile(new URL(`assets/characters/${id}.webp`, root));
+      if (bytes.toString('ascii', 8, 12) !== 'WEBP' || bytes.length > 200000)
+        throw new Error(`Invalid sprite: ${id}`);
+      return [id, 'data:image/webp;base64,' + bytes.toString('base64')];
+    }),
+  ),
+);
+const result =
+  banner +
+  entry
+    .replace(marker, pure)
+    .replace(spriteMarker, `const PET_SPRITES = ${JSON.stringify(sprites)};`);
+const output = new URL('client.js', root);
+
+if (process.argv.includes('--check')) {
+  if ((await readFile(output, 'utf8')) !== result) {
+    throw new Error('Client artifact is stale. Run npm run build and commit client.js.');
+  }
   console.log('Client artifact matches tested source');
 } else {
-  await writeFile(new URL('client.js',root),result);
+  await writeFile(output, result);
   console.log('Built client.js from one calculation source');
 }

package/tools/check-package.mjs

@@ -0,0 +1,105 @@
+import assert from 'node:assert/strict';
+import { execFileSync } from 'node:child_process';
+import { readFile, readdir } from 'node:fs/promises';
+import { fileURLToPath } from 'node:url';
+
+const root = new URL('../', import.meta.url);
+const cwd = fileURLToPath(root);
+const read = (path) => readFile(new URL(path, root), 'utf8');
+const pkg = JSON.parse(await read('package.json'));
+
+assert.equal(pkg.name, 'dsh-offwork');
+assert.equal(pkg.type, 'module');
+assert.equal(pkg.license, 'MIT');
+assert.equal(pkg.repository.url, 'git+https://github.com/SnowBeatRain/dsh-offwork.git');
+assert.ok(pkg.engines?.dsh, 'Declare the supported Harness versions');
+assert.equal(pkg.dsh?.bundle?.patch, './cordis.patch.yml');
+assert.equal(pkg.dsh?.client?.platform, 'web');
+assert.match(await read('LICENSE'), /^MIT License/);
+
+// This check covers this project's patch; Harness composition remains the
+// authoritative check that the bundle can be installed in a real profile.
+const patch = await read('cordis.patch.yml');
+assert.match(patch, /^- insert:/m);
+assert.match(patch, /^\s+- id: offwork-clock\s*$/m);
+assert.match(patch, /^\s+name: ['"]?dsh-offwork['"]?\s*$/m);
+
+for (const lifecycle of ['preinstall', 'install', 'postinstall', 'prepare']) {
+  assert.equal(pkg.scripts?.[lifecycle], undefined, `Unexpected install script: ${lifecycle}`);
+}
+for (const name of Object.keys(pkg.dependencies ?? {})) {
+  assert.ok(!name.startsWith('@deepseek-ai/'), `${name} belongs in peerDependencies`);
+}
+
+const sourceFiles = [];
+for (const directory of ['', 'tests/', 'tools/']) {
+  for (const entry of await readdir(new URL(directory || '.', root), { withFileTypes: true })) {
+    if (entry.isFile() && /\.(?:js|mjs)$/.test(entry.name)) {
+      sourceFiles.push(directory + entry.name);
+    }
+  }
+}
+for (const path of sourceFiles) {
+  execFileSync(process.execPath, ['--check', path], { cwd, stdio: 'pipe' });
+}
+
+for (const language of ['zh', 'en']) {
+  const locale = JSON.parse(await read(`locale/${language}.json`));
+  assert.equal(typeof locale.meta?.title, 'string');
+  assert.ok(locale.meta.title.length > 0);
+  assert.equal(typeof locale.meta?.description, 'string');
+  assert.ok(locale.meta.description.length > 0);
+}
+
+// Ignore lifecycle scripts here: this checker also runs inside prepublishOnly.
+// Inspect npm's actual package file list, rather than relying on .gitignore.
+const npm = process.platform === 'win32' ? 'npm.cmd' : 'npm';
+const [packed] = JSON.parse(
+  execFileSync(npm, ['pack', '--dry-run', '--json', '--ignore-scripts'], {
+    cwd,
+    encoding: 'utf8',
+    stdio: ['ignore', 'pipe', 'pipe'],
+  }),
+);
+const files = new Set(packed.files.map((file) => file.path));
+assert.equal(packed.name, pkg.name);
+assert.equal(packed.version, pkg.version);
+for (const path of [
+  'package.json',
+  'index.js',
+  'client.js',
+  'companion.js',
+  'pet-view.js',
+  'pet-interactions.js',
+  'pet-surfaces.js',
+  'hydration.js',
+  'hydration-store.js',
+  'cordis.patch.yml',
+  'icon.svg',
+  'assets/characters/whale-dress.webp',
+  'assets/characters/whale-ornate.webp',
+  'assets/characters/NOTICE.md',
+  'locale/zh.json',
+  'locale/en.json',
+  'README.md',
+  'LICENSE',
+]) {
+  assert.ok(files.has(path), `Missing package file: ${path}`);
+}
+for (const target of Object.values(pkg.exports)) {
+  if (typeof target === 'string' && !target.includes('*')) {
+    assert.ok(files.has(target.replace(/^\.\//, '')), `Missing export: ${target}`);
+  }
+}
+for (const path of files) {
+  assert.ok(
+    !/(^|\/)(?:data\.json|\.data-[^/]*|\.env(?:\.[^/]*)?|\.npmrc|\.git(?:\/|$)|node_modules(?:\/|$))/.test(
+      path,
+    ),
+    `Local settings or credentials included in package: ${path}`,
+  );
+  assert.ok(!path.endsWith('.tgz'), `Nested package archive: ${path}`);
+}
+console.log(
+  `Package checks passed: ${sourceFiles.length} JavaScript files, ${files.size} packed files.`,
+);

package/ui-utils.js

@@ -2,18 +2,22 @@
 export function formatDuration(seconds) {
   if (!Number.isFinite(seconds) || seconds < 0) return '--:--:--';
   const n = Math.ceil(seconds);
-  return [Math.floor(n / 3600), Math.floor(n % 3600 / 60), n % 60]
-    .map(part => String(part).padStart(2, '0')).join(':');
+  return [Math.floor(n / 3600), Math.floor((n % 3600) / 60), n % 60]
+    .map((part) => String(part).padStart(2, '0'))
+    .join(':');
 }
 
 export function clampPosition(position, viewport, size) {
-  const width = Math.max(0, viewport.width), height = Math.max(0, viewport.height);
+  const width = Math.max(0, viewport.width),
+    height = Math.max(0, viewport.height);
   const edge = Math.min(12, width / 2, height / 2);
-  const maxX = Math.max(edge, width - size.width - edge);
-  const maxY = Math.max(edge, height - size.height - edge);
+  const left = viewport.left ?? 0,
+    top = viewport.top ?? 0;
+  const maxX = Math.max(left + edge, left + width - size.width - edge);
+  const maxY = Math.max(top + edge, top + height - size.height - edge);
   return {
-    x: Math.max(edge, Math.min(Number.isFinite(position?.x) ? position.x : maxX, maxX)),
-    y: Math.max(edge, Math.min(Number.isFinite(position?.y) ? position.y : 88, maxY)),
+    x: Math.max(left + edge, Math.min(Number.isFinite(position?.x) ? position.x : maxX, maxX)),
+    y: Math.max(top + edge, Math.min(Number.isFinite(position?.y) ? position.y : top + 88, maxY)),
   };
 }
 
@@ -27,9 +31,21 @@ export function normalizeView(value) {
   return {
     mini: value?.mini !== false,
     masked: value?.masked !== false,
+    companion: value?.companion !== false,
+    companionMotion: value?.companionMotion !== false,
+    petModel: ['whale-dress', 'whale-ornate', 'xiaoxie-original'].includes(value?.petModel)
+      ? value.petModel
+      : 'whale-dress',
+    petSize: Math.min(180, Math.max(80, Number.isFinite(value?.petSize) ? value.petSize : 132)),
+    petPosition:
+      Number.isFinite(value?.petPosition?.x) && Number.isFinite(value?.petPosition?.y)
+        ? { x: value.petPosition.x, y: value.petPosition.y }
+        : null,
     opacity: clampOpacity(value?.opacity),
-    position: Number.isFinite(value?.position?.x) && Number.isFinite(value?.position?.y)
-      ? { x: value.position.x, y: value.position.y } : null,
+    position:
+      Number.isFinite(value?.position?.x) && Number.isFinite(value?.position?.y)
+        ? { x: value.position.x, y: value.position.y }
+        : null,
   };
 }
 
@@ -38,14 +54,21 @@ export function decodeCommand(rpc) {
   const result = rpc.value?.result;
   if (!result || typeof result.text !== 'string') throw new Error('Command unavailable');
   let data;
-  try { data = JSON.parse(result.text); }
-  catch { throw new Error('Invalid command response'); }
-  if (result.kind !== 'success' || data?.ok !== true) throw new Error(data?.error || 'Request failed');
+  try {
+    data = JSON.parse(result.text);
+  } catch {
+    throw new Error('Invalid command response');
+  }
+  if (result.kind !== 'success' || data?.ok !== true)
+    throw new Error(data?.error || 'Request failed');
   if (!data.settings || typeof data.settings !== 'object') throw new Error('Missing settings');
   return data;
 }
 
 export function changedSettings(original, draft) {
-  return Object.fromEntries(Object.entries(draft)
-    .filter(([key, value]) => JSON.stringify(value) !== JSON.stringify(original[key])));
+  return Object.fromEntries(
+    Object.entries(draft).filter(
+      ([key, value]) => JSON.stringify(value) !== JSON.stringify(original[key]),
+    ),
+  );
 }