@mecha.im/cli 0.3.4

package/agent/dashboard/src/pixel-engine/wallTiles.ts

@@ -0,0 +1,203 @@
+/**
+ * Wall tile auto-tiling: sprite storage and bitmask-based piece selection.
+ *
+ * Stores wall tile sets loaded from individual PNGs in assets/walls/.
+ * Each set contains 16 wall sprites (one per 4-bit bitmask).
+ * At render time, each wall tile's 4 cardinal neighbors are checked to build
+ * a bitmask, and the corresponding sprite is drawn directly.
+ * No changes to the layout model — auto-tiling is purely visual.
+ *
+ * Bitmask convention: N=1, E=2, S=4, W=8. Out-of-bounds = NOT wall.
+ */
+
+import { getColorizedSprite } from './colorize.js';
+import type {
+  FloorColor,
+  FurnitureInstance,
+  SpriteData,
+  TileType as TileTypeVal,
+} from './types.js';
+import { TILE_SIZE, TileType } from './types.js';
+
+/** Wall tile sets: each set has 16 sprites indexed by bitmask (0-15) */
+let wallSets: SpriteData[][] = [];
+
+/** Set wall tile sets (called once when extension sends wallTilesLoaded) */
+export function setWallSprites(sets: SpriteData[][]): void {
+  wallSets = sets;
+}
+
+/** Check if wall sprites have been loaded */
+export function hasWallSprites(): boolean {
+  return wallSets.length > 0;
+}
+
+/** Get number of available wall sets */
+export function getWallSetCount(): number {
+  return wallSets.length;
+}
+
+/** Get the first sprite (bitmask 0, top-left piece) of a wall set for preview rendering */
+export function getWallSetPreviewSprite(setIndex: number): SpriteData | null {
+  const set = wallSets[setIndex];
+  if (!set) return null;
+  return set[0] ?? null;
+}
+
+/**
+ * Build the 4-bit neighbor bitmask for a wall tile at (col, row).
+ */
+function buildWallMask(col: number, row: number, tileMap: TileTypeVal[][]): number {
+  const tmRows = tileMap.length;
+  const tmCols = tmRows > 0 ? tileMap[0].length : 0;
+
+  let mask = 0;
+  if (row > 0 && tileMap[row - 1][col] === TileType.WALL) mask |= 1; // N
+  if (col < tmCols - 1 && tileMap[row][col + 1] === TileType.WALL) mask |= 2; // E
+  if (row < tmRows - 1 && tileMap[row + 1][col] === TileType.WALL) mask |= 4; // S
+  if (col > 0 && tileMap[row][col - 1] === TileType.WALL) mask |= 8; // W
+  return mask;
+}
+
+/**
+ * Get the wall sprite for a tile based on its cardinal neighbors.
+ * Returns the sprite + Y offset, or null to fall back to solid WALL_COLOR.
+ */
+export function getWallSprite(
+  col: number,
+  row: number,
+  tileMap: TileTypeVal[][],
+  setIndex = 0,
+): { sprite: SpriteData; offsetY: number } | null {
+  if (wallSets.length === 0) return null;
+  const sprites = wallSets[setIndex] ?? wallSets[0];
+
+  const mask = buildWallMask(col, row, tileMap);
+  const sprite = sprites[mask];
+  if (!sprite) return null;
+
+  // Anchor sprite at bottom of tile — tall sprites extend upward
+  return { sprite, offsetY: TILE_SIZE - sprite.length };
+}
+
+/**
+ * Get a colorized wall sprite for a tile based on its cardinal neighbors.
+ * Uses Colorize mode (grayscale → HSL) like floor tiles.
+ * Returns the colorized sprite + Y offset, or null if no wall sprites loaded.
+ */
+export function getColorizedWallSprite(
+  col: number,
+  row: number,
+  tileMap: TileTypeVal[][],
+  color: FloorColor,
+  setIndex = 0,
+): { sprite: SpriteData; offsetY: number } | null {
+  if (wallSets.length === 0) return null;
+  const sprites = wallSets[setIndex] ?? wallSets[0];
+
+  const mask = buildWallMask(col, row, tileMap);
+  const sprite = sprites[mask];
+  if (!sprite) return null;
+
+  const cacheKey = `wall-${setIndex}-${mask}-${color.h}-${color.s}-${color.b}-${color.c}`;
+  const colorized = getColorizedSprite(cacheKey, sprite, { ...color, colorize: true });
+
+  return { sprite: colorized, offsetY: TILE_SIZE - sprite.length };
+}
+
+/**
+ * Build FurnitureInstance-like objects for all wall tiles so they can participate
+ * in z-sorting with furniture and characters.
+ */
+export function getWallInstances(
+  tileMap: TileTypeVal[][],
+  tileColors?: Array<FloorColor | null>,
+  cols?: number,
+): FurnitureInstance[] {
+  if (wallSets.length === 0) return [];
+  const tmRows = tileMap.length;
+  const tmCols = tmRows > 0 ? tileMap[0].length : 0;
+  const layoutCols = cols ?? tmCols;
+  const instances: FurnitureInstance[] = [];
+  for (let r = 0; r < tmRows; r++) {
+    for (let c = 0; c < tmCols; c++) {
+      if (tileMap[r][c] !== TileType.WALL) continue;
+      const colorIdx = r * layoutCols + c;
+      const wallColor = tileColors?.[colorIdx];
+      const wallInfo = wallColor
+        ? getColorizedWallSprite(c, r, tileMap, wallColor)
+        : getWallSprite(c, r, tileMap);
+      if (!wallInfo) continue;
+      instances.push({
+        sprite: wallInfo.sprite,
+        x: c * TILE_SIZE,
+        y: r * TILE_SIZE + wallInfo.offsetY,
+        zY: (r + 1) * TILE_SIZE,
+      });
+    }
+  }
+  return instances;
+}
+
+/**
+ * Compute the flat fill hex color for a wall tile with a given FloorColor.
+ * Uses same Colorize algorithm as floor tiles: 50% gray → HSL.
+ */
+export function wallColorToHex(color: FloorColor): string {
+  const { h, s, b, c } = color;
+  // Start with 50% gray (wall base)
+  let lightness = 0.5;
+
+  // Apply contrast
+  if (c !== 0) {
+    const factor = (100 + c) / 100;
+    lightness = 0.5 + (lightness - 0.5) * factor;
+  }
+
+  // Apply brightness
+  if (b !== 0) {
+    lightness = lightness + b / 200;
+  }
+
+  lightness = Math.max(0, Math.min(1, lightness));
+
+  // HSL to hex (same as colorize.ts hslToHex)
+  const satFrac = s / 100;
+  const ch = (1 - Math.abs(2 * lightness - 1)) * satFrac;
+  const hp = h / 60;
+  const x = ch * (1 - Math.abs((hp % 2) - 1));
+  let r1 = 0,
+    g1 = 0,
+    b1 = 0;
+
+  if (hp < 1) {
+    r1 = ch;
+    g1 = x;
+    b1 = 0;
+  } else if (hp < 2) {
+    r1 = x;
+    g1 = ch;
+    b1 = 0;
+  } else if (hp < 3) {
+    r1 = 0;
+    g1 = ch;
+    b1 = x;
+  } else if (hp < 4) {
+    r1 = 0;
+    g1 = x;
+    b1 = ch;
+  } else if (hp < 5) {
+    r1 = x;
+    g1 = 0;
+    b1 = ch;
+  } else {
+    r1 = ch;
+    g1 = 0;
+    b1 = x;
+  }
+
+  const m = lightness - ch / 2;
+  const clamp = (v: number) => Math.max(0, Math.min(255, Math.round((v + m) * 255)));
+
+  return `#${clamp(r1).toString(16).padStart(2, '0')}${clamp(g1).toString(16).padStart(2, '0')}${clamp(b1).toString(16).padStart(2, '0')}`;
+}

package/agent/dashboard/src/views/auth.tsx

@@ -0,0 +1,249 @@
+import { useState, useEffect, useCallback } from "react";
+import { fleetFetch } from "../lib/fleet-context";
+import { Button, Input, Card, Alert, StatusDot, StatusBadge } from "../components";
+
+interface AuthProfile {
+  name: string;
+  type: string;
+}
+
+function TotpSection() {
+  const [enabled, setEnabled] = useState<boolean | null>(null);
+  const [secret, setSecret] = useState<string | null>(null);
+  const [uri, setUri] = useState<string | null>(null);
+  const [disableCode, setDisableCode] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [message, setMessage] = useState<{ text: string; type: "success" | "error" } | null>(null);
+
+  const checkStatus = useCallback(() => {
+    fleetFetch("/api/totp/status")
+      .then((r) => r.json())
+      .then((data: { enabled?: boolean }) => setEnabled(!!data.enabled))
+      .catch(() => {});
+  }, []);
+
+  useEffect(() => { checkStatus(); }, [checkStatus]);
+
+  async function handleEnable() {
+    setBusy(true);
+    setMessage(null);
+    try {
+      const resp = await fleetFetch("/api/totp/enable", { method: "POST" });
+      const data = await resp.json() as { secret?: string; uri?: string; error?: string };
+      if (!resp.ok) {
+        setMessage({ text: String(data.error ?? "Failed"), type: "error" });
+        return;
+      }
+      setSecret(data.secret ?? null);
+      setUri(data.uri ?? null);
+      setEnabled(true);
+      setMessage({ text: "TOTP enabled — save this secret in your authenticator app", type: "success" });
+    } catch {
+      setMessage({ text: "Network error", type: "error" });
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function handleDisable() {
+    if (disableCode.length !== 6) return;
+    setBusy(true);
+    setMessage(null);
+    try {
+      const resp = await fleetFetch("/api/totp", {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ code: disableCode }),
+      });
+      const data = await resp.json() as { error?: string };
+      if (!resp.ok) {
+        setMessage({ text: String(data.error ?? "Failed"), type: "error" });
+        return;
+      }
+      setEnabled(false);
+      setSecret(null);
+      setUri(null);
+      setDisableCode("");
+      setMessage({ text: "TOTP disabled", type: "success" });
+    } catch {
+      setMessage({ text: "Network error", type: "error" });
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  if (enabled === null) return null;
+
+  return (
+    <section>
+      <div className="flex items-center justify-between mb-4">
+        <h2 className="text-lg font-semibold text-foreground">Dashboard Authentication</h2>
+        <StatusBadge variant={enabled ? "success" : "muted"}>
+          {enabled ? "TOTP enabled" : "No authentication"}
+        </StatusBadge>
+      </div>
+
+      {message && (
+        <Alert variant={message.type} onDismiss={() => setMessage(null)} className="mb-3">
+          {message.text}
+        </Alert>
+      )}
+
+      {!enabled && (
+        <Card spacing={3}>
+          <p className="text-sm text-muted-foreground">
+            Enable TOTP to require a 6-digit code from an authenticator app when accessing the dashboard.
+          </p>
+          <Button onClick={handleEnable} disabled={busy}>
+            {busy ? "Enabling..." : "Enable TOTP"}
+          </Button>
+        </Card>
+      )}
+
+      {enabled && secret && (
+        <Card spacing={3}>
+          <p className="text-sm text-muted-foreground">
+            Scan this URI with your authenticator app, or copy the secret manually.
+          </p>
+          <div>
+            <label className="text-xs text-muted-foreground block mb-1">Secret</label>
+            <Input mono readOnly value={secret} className="w-full" />
+          </div>
+          {uri && (
+            <div>
+              <label className="text-xs text-muted-foreground block mb-1">OTPAuth URI</label>
+              <Input mono readOnly value={uri} className="w-full text-xs" />
+            </div>
+          )}
+        </Card>
+      )}
+
+      {enabled && !secret && (
+        <Card spacing={3}>
+          <p className="text-sm text-muted-foreground">
+            To disable TOTP, enter a valid code from your authenticator app.
+          </p>
+          <Input
+            mono
+            value={disableCode}
+            onChange={(e) => {
+              const v = e.target.value.replace(/\D/g, "").slice(0, 6);
+              setDisableCode(v);
+            }}
+            placeholder="6-digit code"
+            className="w-48"
+            inputMode="numeric"
+          />
+          <Button
+            variant="destructive-soft"
+            onClick={handleDisable}
+            disabled={disableCode.length !== 6 || busy}
+          >
+            {busy ? "Disabling..." : "Disable TOTP"}
+          </Button>
+        </Card>
+      )}
+    </section>
+  );
+}
+
+export default function Auth() {
+  const [profiles, setProfiles] = useState<AuthProfile[]>([]);
+  const [newProfile, setNewProfile] = useState("");
+  const [newKey, setNewKey] = useState("");
+  const [addBusy, setAddBusy] = useState(false);
+  const [message, setMessage] = useState<{ text: string; type: "success" | "error" } | null>(null);
+
+  const refresh = useCallback(() => {
+    fleetFetch("/api/auth")
+      .then((r) => { if (!r.ok) throw new Error(`HTTP ${r.status}`); return r.json(); })
+      .then((data) => {
+        if (!Array.isArray(data)) return;
+        if (data.length === 0 || typeof data[0] === "string") {
+          setProfiles(data.map((name: string) => ({ name, type: "unknown" })));
+        } else {
+          setProfiles(data as AuthProfile[]);
+        }
+      })
+      .catch(() => {});
+  }, []);
+
+  useEffect(() => { refresh(); }, [refresh]);
+
+  async function addProfile() {
+    if (!newProfile || !newKey) return;
+    setAddBusy(true);
+    setMessage(null);
+    try {
+      const resp = await fleetFetch("/api/auth", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ profile: newProfile, key: newKey }),
+      });
+      const data = await resp.json() as Record<string, unknown>;
+      if (!resp.ok) {
+        setMessage({ text: String(data.error ?? "Failed to add"), type: "error" });
+        return;
+      }
+      setMessage({ text: `Profile "${newProfile}" added`, type: "success" });
+      setNewProfile("");
+      setNewKey("");
+      refresh();
+    } catch { setMessage({ text: "Network error", type: "error" }); }
+    finally { setAddBusy(false); }
+  }
+
+  return (
+    <div className="p-6 space-y-6 max-w-4xl mx-auto h-full overflow-y-auto">
+      <TotpSection />
+
+      <section>
+        <h2 className="text-lg font-semibold text-foreground mb-4">Auth Profiles</h2>
+        <div className="space-y-2">
+          {profiles.length === 0 && <p className="text-muted-foreground text-sm">No profiles configured</p>}
+          {profiles.map((p) => (
+            <Card compact key={p.name} className="flex items-center gap-3">
+              <StatusDot color="green" />
+              <span className="font-mono text-sm text-foreground">{p.name}</span>
+              {p.type !== "unknown" && (
+                <span className="text-xs text-muted-foreground">({p.type})</span>
+              )}
+            </Card>
+          ))}
+        </div>
+      </section>
+
+      <section>
+        <h2 className="text-lg font-semibold text-foreground mb-4">Add Profile</h2>
+        <Card spacing={3}>
+          <Input
+            value={newProfile}
+            onChange={(e) => setNewProfile(e.target.value)}
+            placeholder="Profile name (e.g. anthropic-main)"
+            className="w-full"
+          />
+          <Input
+            value={newKey}
+            onChange={(e) => setNewKey(e.target.value)}
+            placeholder="API key or OAuth token"
+            type="password"
+            className="w-full"
+          />
+
+          {message && (
+            <Alert variant={message.type}>
+              {message.text}
+            </Alert>
+          )}
+
+          <Button
+            onClick={addProfile}
+            disabled={!newProfile || !newKey || addBusy}
+          >
+            {addBusy ? "Adding..." : "Add Profile"}
+          </Button>
+        </Card>
+      </section>
+    </div>
+  );
+}