fix(export): switch mxdrw auth from Bearer to HTTP Basic

mxdrw expects HTTP Basic Auth (BASIC_AUTH_USER + BASIC_AUTH_PASS on the
server side). Replace MEXDRAW_TOKEN with MEXDRAW_USER + MEXDRAW_PASS,
use req.SetBasicAuth on the export PUT.

Updated docker-compose.yml comment and README env table to match.
Roundtrip verified locally against mxdrw.msbls.de.

README.md

@@ -43,8 +43,9 @@ JSON API under `/api/`. SQLite lives at `./data/mcables.db` by default.
 |---|---|---|
 | `MCABLES_ADDR` | `0.0.0.0:7777` | Listen address. |
 | `MCABLES_DB` | `./data/mcables.db` | SQLite path. Parent dir is created on boot. |
-| `MEXDRAW_BASE_URL` | (unset) | Used by slice 5 export — not consumed yet. |
-| `MEXDRAW_TOKEN` | (unset) | Bearer for the mExDraw export. Not consumed yet. |
+| `MEXDRAW_BASE_URL` | `https://mxdrw.msbls.de` | Base URL for mExDraw export. |
+| `MEXDRAW_USER` | (unset) | Username for the mxdrw HTTP Basic Auth on export. Required. |
+| `MEXDRAW_PASS` | (unset) | Password for the mxdrw HTTP Basic Auth on export. Required. |
 
 ### Tests
 

docker-compose.yml

@@ -14,7 +14,7 @@ services:
       - MCABLES_ADDR=0.0.0.0:7777
       - MCABLES_DB=/app/data/mcables.db
     env_file:
-      # Empty for slice 1. MEXDRAW_TOKEN lands here when slice 5 ships.
+      # MEXDRAW_USER + MEXDRAW_PASS for the mxdrw HTTP Basic Auth on export.
       - /home/m/secrets/mcables/.env
     volumes:
       - /home/m/stacks/mcables/data:/app/data

internal/db/excalidraw_ids.go

@@ -0,0 +1,60 @@
+package db
+
+import (
+	"database/sql"
+)
+
+// PersistExcalidrawIDs writes the assignments returned by the exporter
+// back onto the corresponding rows. Idempotent: only updates rows whose
+// excalidraw_id is currently NULL (the first export "owns" the id; later
+// exports reuse it so mxdrw's collab cursors / undo history survive).
+//
+// Caller passes one map per kind; keys are the in-project row ids,
+// values are the 21-char Excalidraw element ids the exporter minted.
+func (s *Store) PersistExcalidrawIDs(projectID int64,
+	frames, devices, ports, ios, cables map[int64]string,
+) error {
+	tx, err := s.db.Begin()
+	if err != nil {
+		return err
+	}
+	defer tx.Rollback()
+
+	if err := updateExIDs(tx, "frames", projectID, frames); err != nil {
+		return err
+	}
+	if err := updateExIDs(tx, "devices", projectID, devices); err != nil {
+		return err
+	}
+	if err := updateExIDs(tx, "ports", projectID, ports); err != nil {
+		return err
+	}
+	if err := updateExIDs(tx, "io_markers", projectID, ios); err != nil {
+		return err
+	}
+	if err := updateExIDs(tx, "cables", projectID, cables); err != nil {
+		return err
+	}
+	return tx.Commit()
+}
+
+func updateExIDs(tx *sql.Tx, table string, projectID int64, m map[int64]string) error {
+	if len(m) == 0 {
+		return nil
+	}
+	stmt, err := tx.Prepare(
+		`UPDATE ` + table + `
+		 SET excalidraw_id = ?
+		 WHERE id = ? AND project_id = ? AND excalidraw_id IS NULL`,
+	)
+	if err != nil {
+		return err
+	}
+	defer stmt.Close()
+	for id, exID := range m {
+		if _, err := stmt.Exec(exID, id, projectID); err != nil {
+			return err
+		}
+	}
+	return nil
+}

internal/db/ports.go

@@ -2,8 +2,187 @@ package db
 
 import (
 	"database/sql"
+	"errors"
+	"fmt"
+	"strings"
 )
 
+// PortCreate is the create-shape for POST /api/projects/:pid/devices/:id/ports.
+type PortCreate struct {
+	TypeID  int64
+	Label   string
+	XOffset float64
+	YOffset float64
+}
+
+// PortUpdate is the partial-update shape.
+type PortUpdate struct {
+	TypeID  *int64
+	Label   *string
+	XOffset *float64
+	YOffset *float64
+}
+
+// CreatePort inserts a port on a device. The device must exist in the
+// project; the cable type must exist globally.
+func (s *Store) CreatePort(projectID, deviceID int64, p PortCreate) (*Port, error) {
+	if _, err := s.GetDevice(projectID, deviceID); err != nil {
+		return nil, err
+	}
+	if _, err := s.GetCableType(p.TypeID); err != nil {
+		if errors.Is(err, ErrNotFound) {
+			return nil, fmt.Errorf("%w: cable type %d not found", ErrInvalidInput, p.TypeID)
+		}
+		return nil, err
+	}
+	label := strings.TrimSpace(p.Label)
+	var labelArg any
+	if label != "" {
+		labelArg = label
+	}
+	res, err := s.db.Exec(
+		`INSERT INTO ports (project_id, device_id, type_id, label, x_offset, y_offset)
+		 VALUES (?, ?, ?, ?, ?, ?)`,
+		projectID, deviceID, p.TypeID, labelArg, p.XOffset, p.YOffset,
+	)
+	if err != nil {
+		return nil, mapWriteErr(err)
+	}
+	id, _ := res.LastInsertId()
+	return s.GetPort(projectID, id)
+}
+
+// GetPort loads a port by id, project-scoped.
+func (s *Store) GetPort(projectID, id int64) (*Port, error) {
+	var p Port
+	var label, ex sql.NullString
+	err := s.db.QueryRow(
+		`SELECT id, project_id, device_id, type_id, label, x_offset, y_offset,
+		        excalidraw_id, created_at, updated_at
+		 FROM ports WHERE id = ? AND project_id = ?`, id, projectID,
+	).Scan(&p.ID, &p.ProjectID, &p.DeviceID, &p.TypeID, &label,
+		&p.XOffset, &p.YOffset, &ex, &p.CreatedAt, &p.UpdatedAt)
+	if errors.Is(err, sql.ErrNoRows) {
+		return nil, ErrNotFound
+	}
+	if err != nil {
+		return nil, err
+	}
+	if label.Valid {
+		v := label.String
+		p.Label = &v
+	}
+	if ex.Valid {
+		p.ExcalidrawID = &ex.String
+	}
+	return &p, nil
+}
+
+// UpdatePort applies a partial update.
+func (s *Store) UpdatePort(projectID, id int64, u PortUpdate) (*Port, error) {
+	cur, err := s.GetPort(projectID, id)
+	if err != nil {
+		return nil, err
+	}
+	if u.TypeID != nil {
+		if _, err := s.GetCableType(*u.TypeID); err != nil {
+			if errors.Is(err, ErrNotFound) {
+				return nil, fmt.Errorf("%w: cable type %d not found", ErrInvalidInput, *u.TypeID)
+			}
+			return nil, err
+		}
+		cur.TypeID = *u.TypeID
+	}
+	if u.Label != nil {
+		v := strings.TrimSpace(*u.Label)
+		if v == "" {
+			cur.Label = nil
+		} else {
+			cur.Label = &v
+		}
+	}
+	if u.XOffset != nil {
+		cur.XOffset = *u.XOffset
+	}
+	if u.YOffset != nil {
+		cur.YOffset = *u.YOffset
+	}
+	var labelArg any
+	if cur.Label != nil {
+		labelArg = *cur.Label
+	}
+	if _, err := s.db.Exec(
+		`UPDATE ports
+		 SET type_id = ?, label = ?, x_offset = ?, y_offset = ?, updated_at = datetime('now')
+		 WHERE id = ? AND project_id = ?`,
+		cur.TypeID, labelArg, cur.XOffset, cur.YOffset, id, projectID,
+	); err != nil {
+		return nil, mapWriteErr(err)
+	}
+	return s.GetPort(projectID, id)
+}
+
+// DeletePort removes a port from a device. The schema's
+// ON DELETE SET NULL on cables.from_port_id / to_port_id collides with
+// the cable's CHECK ((from_port|from_device|from_io) = 1 non-null), so
+// we instead cascade-delete any cables that referenced the port on
+// either side — same effect from m's POV: the cable is gone, m can
+// re-draw if he still wants it.
+func (s *Store) DeletePort(projectID, id int64) error {
+	if _, err := s.GetPort(projectID, id); err != nil {
+		return err
+	}
+	tx, err := s.db.Begin()
+	if err != nil {
+		return err
+	}
+	defer tx.Rollback()
+	if _, err := tx.Exec(
+		`DELETE FROM cables WHERE project_id = ? AND (from_port_id = ? OR to_port_id = ?)`,
+		projectID, id, id,
+	); err != nil {
+		return err
+	}
+	if _, err := tx.Exec(
+		`DELETE FROM ports WHERE id = ? AND project_id = ?`, id, projectID,
+	); err != nil {
+		return err
+	}
+	return tx.Commit()
+}
+
+// ListPortsForDevice returns every port on one device, project-scoped.
+func (s *Store) ListPortsForDevice(projectID, deviceID int64) ([]Port, error) {
+	rows, err := s.db.Query(
+		`SELECT id, project_id, device_id, type_id, label, x_offset, y_offset,
+		        excalidraw_id, created_at, updated_at
+		 FROM ports WHERE project_id = ? AND device_id = ? ORDER BY id`,
+		projectID, deviceID,
+	)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+	out := []Port{}
+	for rows.Next() {
+		var p Port
+		var label, ex sql.NullString
+		if err := rows.Scan(&p.ID, &p.ProjectID, &p.DeviceID, &p.TypeID, &label,
+			&p.XOffset, &p.YOffset, &ex, &p.CreatedAt, &p.UpdatedAt); err != nil {
+			return nil, err
+		}
+		if label.Valid {
+			v := label.String
+			p.Label = &v
+		}
+		if ex.Valid {
+			p.ExcalidrawID = &ex.String
+		}
+		out = append(out, p)
+	}
+	return out, rows.Err()
+}
+
 // ListPortsForProject returns every port in a project, ordered by
 // device_id + id so callers can group cheaply.
 func (s *Store) ListPortsForProject(projectID int64) ([]Port, error) {

internal/exporter/exporter.go

@@ -0,0 +1,563 @@
+// Package exporter builds an Excalidraw scene JSON from a project
+// snapshot per docs/design.md §4 ("Export — DB → Excalidraw").
+//
+// The exporter is a pure function on a *db.Snapshot — no DB access, no
+// IO — so it's trivial to unit-test against fixtures and gives the
+// caller (the HTTP handler) a clean handoff: build scene → upload.
+package exporter
+
+import (
+	"crypto/rand"
+	"encoding/json"
+	"fmt"
+	"math/big"
+
+	"mgit.msbls.de/m/mcables/internal/db"
+)
+
+// Scene is the top-level Excalidraw file format. Keys mirror what the
+// official Excalidraw JSON contains (we only emit the keys mxdrw cares
+// about for rendering — `appState`, `files`, `libraryItems` etc. can be
+// added later if m needs them).
+type Scene struct {
+	Type     string    `json:"type"`
+	Version  int       `json:"version"`
+	Source   string    `json:"source"`
+	Elements []Element `json:"elements"`
+	AppState AppState  `json:"appState"`
+	Files    Files     `json:"files"`
+}
+
+type AppState struct {
+	GridSize       *int   `json:"gridSize"`
+	ViewBackground string `json:"viewBackgroundColor"`
+}
+
+type Files struct{}
+
+// Element is one node in the scene. Excalidraw's wire format has a lot
+// of optional fields; we only emit the ones that matter for the shapes
+// we draw. Extra null/zero fields are fine in Excalidraw (it merges
+// defaults). Pointer fields stay nil-omitted via omitempty so the
+// payload stays clean.
+type Element struct {
+	ID              string       `json:"id"`
+	Type            string       `json:"type"`
+	X               float64      `json:"x"`
+	Y               float64      `json:"y"`
+	Width           float64      `json:"width"`
+	Height          float64      `json:"height"`
+	Angle           float64      `json:"angle"`
+	StrokeColor     string       `json:"strokeColor"`
+	BackgroundColor string       `json:"backgroundColor"`
+	FillStyle       string       `json:"fillStyle"`
+	StrokeWidth     int          `json:"strokeWidth"`
+	StrokeStyle     string       `json:"strokeStyle"`
+	Roughness       int          `json:"roughness"`
+	Opacity         int          `json:"opacity"`
+	GroupIDs        []string     `json:"groupIds"`
+	FrameID         *string      `json:"frameId"`
+	Roundness       *Roundness   `json:"roundness"`
+	Seed            int64        `json:"seed"`
+	Version         int          `json:"version"`
+	VersionNonce    int64        `json:"versionNonce"`
+	IsDeleted       bool         `json:"isDeleted"`
+	BoundElements   []BoundRef   `json:"boundElements,omitempty"`
+	Updated         int64        `json:"updated"`
+	Link            *string      `json:"link"`
+	Locked          bool         `json:"locked"`
+
+	// Element-type-specific extras
+	Name string `json:"name,omitempty"`
+
+	// Text-element fields
+	Text         string `json:"text,omitempty"`
+	FontSize     int    `json:"fontSize,omitempty"`
+	FontFamily   int    `json:"fontFamily,omitempty"`
+	TextAlign    string `json:"textAlign,omitempty"`
+	VerticalAlign string `json:"verticalAlign,omitempty"`
+	ContainerID  *string `json:"containerId,omitempty"`
+	OriginalText string `json:"originalText,omitempty"`
+	LineHeight   float64 `json:"lineHeight,omitempty"`
+
+	// Arrow-element fields
+	Points       [][2]float64  `json:"points,omitempty"`
+	StartBinding *Binding      `json:"startBinding,omitempty"`
+	EndBinding   *Binding      `json:"endBinding,omitempty"`
+	StartArrowhead *string     `json:"startArrowhead,omitempty"`
+	EndArrowhead   *string     `json:"endArrowhead,omitempty"`
+	LastCommittedPoint *[2]float64 `json:"lastCommittedPoint,omitempty"`
+}
+
+type Roundness struct {
+	Type int `json:"type"`
+}
+
+type BoundRef struct {
+	ID   string `json:"id"`
+	Type string `json:"type"`
+}
+
+type Binding struct {
+	ElementID string   `json:"elementId"`
+	Focus     float64  `json:"focus"`
+	Gap       float64  `json:"gap"`
+}
+
+// IDAssignment is the result of running BuildScene: the scene to upload
+// + the per-row excalidraw_id assignments that the caller should
+// persist so the next export reuses the same ids (Excalidraw collab
+// cursors / comments / undo history survive that way; design §4.2).
+type IDAssignment struct {
+	Frames    map[int64]string `json:"frames"`
+	Devices   map[int64]string `json:"devices"`
+	Ports     map[int64]string `json:"ports"`
+	IOMarkers map[int64]string `json:"io_markers"`
+	Cables    map[int64]string `json:"cables"`
+}
+
+// BuildScene transforms a project snapshot into an Excalidraw Scene +
+// the id-assignment side-table.
+//
+// nowMilli is the Updated timestamp (one millisecond stamp for every
+// element keeps re-exports consistent — mxdrw treats wildly-different
+// updateds as edit-noise).
+//
+// genID is a 21-char ID factory. Tests pass a deterministic generator
+// to lock element ids down across asserts. Production uses Generate21.
+func BuildScene(snap *db.Snapshot, nowMilli int64, genID func() string) (*Scene, *IDAssignment) {
+	a := &IDAssignment{
+		Frames:    map[int64]string{},
+		Devices:   map[int64]string{},
+		Ports:     map[int64]string{},
+		IOMarkers: map[int64]string{},
+		Cables:    map[int64]string{},
+	}
+	// idFor: reuse the existing excalidraw_id if present, else mint one.
+	idFor := func(existing *string) string {
+		if existing != nil && *existing != "" {
+			return *existing
+		}
+		return genID()
+	}
+
+	cableTypeColor := map[int64]string{}
+	for _, t := range snap.CableTypes {
+		cableTypeColor[t.ID] = t.Color
+	}
+
+	// We'll need: device-id → element-id, port-id → element-id, io-id → element-id
+	// for binding arrows.
+	deviceElID := map[int64]string{}
+	portElID := map[int64]string{}
+	ioElID := map[int64]string{}
+	frameElID := map[int64]string{}
+
+	var els []Element
+
+	// Frames first (Excalidraw renders later elements on top; frames are
+	// containers that go on the bottom).
+	for _, f := range snap.Frames {
+		elID := idFor(f.ExcalidrawID)
+		a.Frames[f.ID] = elID
+		frameElID[f.ID] = elID
+		els = append(els, Element{
+			ID:              elID,
+			Type:            "frame",
+			X:               f.X,
+			Y:               f.Y,
+			Width:           f.Width,
+			Height:          f.Height,
+			StrokeColor:     "#bbbbbb",
+			BackgroundColor: "transparent",
+			FillStyle:       "solid",
+			StrokeWidth:     2,
+			StrokeStyle:     "solid",
+			Roughness:       0,
+			Opacity:         100,
+			GroupIDs:        []string{},
+			Seed:            randInt(),
+			Version:         1,
+			VersionNonce:    randInt(),
+			Updated:         nowMilli,
+			Name:            f.Name,
+		})
+	}
+
+	// Devices: rectangle + bound text with the device's name. Excalidraw
+	// uses a `containerId` pointer on the text to bind it to the rect,
+	// and `boundElements` on the rect to point back at the text.
+	for _, d := range snap.Devices {
+		rectID := idFor(d.ExcalidrawID)
+		a.Devices[d.ID] = rectID
+		deviceElID[d.ID] = rectID
+		textID := genID()
+		var frameRef *string
+		if d.FrameID != nil {
+			if v, ok := frameElID[*d.FrameID]; ok {
+				frameRef = &v
+			}
+		}
+		// Rect
+		els = append(els, Element{
+			ID:              rectID,
+			Type:            "rectangle",
+			X:               d.X,
+			Y:               d.Y,
+			Width:           d.Width,
+			Height:          d.Height,
+			StrokeColor:     d.Color,
+			BackgroundColor: "transparent",
+			FillStyle:       "solid",
+			StrokeWidth:     2,
+			StrokeStyle:     "solid",
+			Roughness:       0,
+			Opacity:         100,
+			GroupIDs:        []string{},
+			FrameID:         frameRef,
+			Roundness:       &Roundness{Type: 3},
+			Seed:            randInt(),
+			Version:         1,
+			VersionNonce:    randInt(),
+			Updated:         nowMilli,
+			BoundElements:   []BoundRef{{ID: textID, Type: "text"}},
+		})
+		// Bound text — name centered on the rect.
+		els = append(els, Element{
+			ID:              textID,
+			Type:            "text",
+			X:               d.X,
+			Y:               d.Y + d.Height/2 - 8,
+			Width:           d.Width,
+			Height:          16,
+			StrokeColor:     d.Color,
+			BackgroundColor: "transparent",
+			FillStyle:       "solid",
+			StrokeWidth:     2,
+			StrokeStyle:     "solid",
+			Roughness:       0,
+			Opacity:         100,
+			GroupIDs:        []string{},
+			FrameID:         frameRef,
+			Seed:            randInt(),
+			Version:         1,
+			VersionNonce:    randInt(),
+			Updated:         nowMilli,
+			Text:            d.Name,
+			OriginalText:    d.Name,
+			FontSize:        16,
+			FontFamily:      1,
+			TextAlign:       "center",
+			VerticalAlign:   "middle",
+			ContainerID:     &rectID,
+			LineHeight:      1.25,
+		})
+	}
+
+	// Ports — small ellipses at device.x + port.x_offset (positional,
+	// not containerId-bound per the seed drawing's grammar; design §4.1).
+	for _, p := range snap.Ports {
+		elID := idFor(p.ExcalidrawID)
+		a.Ports[p.ID] = elID
+		portElID[p.ID] = elID
+		// Locate the parent device for absolute pos + frame ref.
+		var dev *db.Device
+		for i := range snap.Devices {
+			if snap.Devices[i].ID == p.DeviceID {
+				dev = &snap.Devices[i]
+				break
+			}
+		}
+		if dev == nil {
+			continue
+		}
+		var frameRef *string
+		if dev.FrameID != nil {
+			if v, ok := frameElID[*dev.FrameID]; ok {
+				frameRef = &v
+			}
+		}
+		color := cableTypeColor[p.TypeID]
+		if color == "" {
+			color = "#1e1e1e"
+		}
+		els = append(els, Element{
+			ID:              elID,
+			Type:            "ellipse",
+			X:               dev.X + p.XOffset - 6,
+			Y:               dev.Y + p.YOffset - 4,
+			Width:           12,
+			Height:          9,
+			StrokeColor:     color,
+			BackgroundColor: "transparent",
+			FillStyle:       "solid",
+			StrokeWidth:     2,
+			StrokeStyle:     "solid",
+			Roughness:       0,
+			Opacity:         100,
+			GroupIDs:        []string{},
+			FrameID:         frameRef,
+			Roundness:       &Roundness{Type: 2},
+			Seed:            randInt(),
+			Version:         1,
+			VersionNonce:    randInt(),
+			Updated:         nowMilli,
+		})
+	}
+
+	// IO markers — diamonds with bound "IO" (or m's label) text.
+	powerColor := ""
+	for _, t := range snap.CableTypes {
+		if t.Name == "Power" {
+			powerColor = t.Color
+			break
+		}
+	}
+	if powerColor == "" {
+		powerColor = "#e03131"
+	}
+	for _, m := range snap.IOMarkers {
+		elID := idFor(m.ExcalidrawID)
+		a.IOMarkers[m.ID] = elID
+		ioElID[m.ID] = elID
+		textID := genID()
+		var frameRef *string
+		if m.FrameID != nil {
+			if v, ok := frameElID[*m.FrameID]; ok {
+				frameRef = &v
+			}
+		}
+		els = append(els, Element{
+			ID:              elID,
+			Type:            "diamond",
+			X:               m.X,
+			Y:               m.Y,
+			Width:           30,
+			Height:          30,
+			StrokeColor:     powerColor,
+			BackgroundColor: "transparent",
+			FillStyle:       "solid",
+			StrokeWidth:     2,
+			StrokeStyle:     "solid",
+			Roughness:       0,
+			Opacity:         100,
+			GroupIDs:        []string{},
+			FrameID:         frameRef,
+			Roundness:       &Roundness{Type: 2},
+			Seed:            randInt(),
+			Version:         1,
+			VersionNonce:    randInt(),
+			Updated:         nowMilli,
+			BoundElements:   []BoundRef{{ID: textID, Type: "text"}},
+		})
+		els = append(els, Element{
+			ID:              textID,
+			Type:            "text",
+			X:               m.X,
+			Y:               m.Y + 7,
+			Width:           30,
+			Height:          16,
+			StrokeColor:     powerColor,
+			BackgroundColor: "transparent",
+			FillStyle:       "solid",
+			StrokeWidth:     2,
+			StrokeStyle:     "solid",
+			Roughness:       0,
+			Opacity:         100,
+			GroupIDs:        []string{},
+			FrameID:         frameRef,
+			Seed:            randInt(),
+			Version:         1,
+			VersionNonce:    randInt(),
+			Updated:         nowMilli,
+			Text:            m.Label,
+			OriginalText:    m.Label,
+			FontSize:        11,
+			FontFamily:      1,
+			TextAlign:       "center",
+			VerticalAlign:   "middle",
+			ContainerID:     &elID,
+			LineHeight:      1.25,
+		})
+	}
+
+	// Cables — arrows with startBinding/endBinding to the port / device /
+	// IO marker excalidraw_ids. Endpoint anchors (the visible "from" /
+	// "to" points) come from the same anchor logic the canvas uses.
+	for _, c := range snap.Cables {
+		elID := idFor(c.ExcalidrawID)
+		a.Cables[c.ID] = elID
+		fromAnchor, fromRef := exportAnchor(c.FromPortID, c.FromDeviceID, c.FromIOID,
+			snap, deviceElID, portElID, ioElID)
+		toAnchor, toRef := exportAnchor(c.ToPortID, c.ToDeviceID, c.ToIOID,
+			snap, deviceElID, portElID, ioElID)
+		// fromRef/toRef are nil when the endpoint row vanished (manual
+		// cable referencing a deleted port, say). Skip rather than emit
+		// a half-bound arrow.
+		if fromRef == nil || toRef == nil {
+			continue
+		}
+		color := cableTypeColor[c.TypeID]
+		if color == "" {
+			color = "#1e1e1e"
+		}
+		startArr := ""
+		endArr := "arrow"
+		els = append(els, Element{
+			ID:              elID,
+			Type:            "arrow",
+			X:               fromAnchor[0],
+			Y:               fromAnchor[1],
+			Width:           toAnchor[0] - fromAnchor[0],
+			Height:          toAnchor[1] - fromAnchor[1],
+			StrokeColor:     color,
+			BackgroundColor: "transparent",
+			FillStyle:       "solid",
+			StrokeWidth:     2,
+			StrokeStyle:     "solid",
+			Roughness:       0,
+			Opacity:         100,
+			GroupIDs:        []string{},
+			Seed:            randInt(),
+			Version:         1,
+			VersionNonce:    randInt(),
+			Updated:         nowMilli,
+			Points:          [][2]float64{{0, 0}, {toAnchor[0] - fromAnchor[0], toAnchor[1] - fromAnchor[1]}},
+			StartArrowhead:  &startArr,
+			EndArrowhead:    &endArr,
+			StartBinding:    bindingPtr(fromRef),
+			EndBinding:      bindingPtr(toRef),
+		})
+	}
+
+	// Legend in the top-left of the first frame (or at 20,20 if there
+	// are no frames). One text row per cable_type, stacked vertically.
+	legendX, legendY := 20.0, 20.0
+	if len(snap.Frames) > 0 {
+		legendX = snap.Frames[0].X + 10
+		legendY = snap.Frames[0].Y + 10
+	}
+	for i, t := range snap.CableTypes {
+		els = append(els, Element{
+			ID:              genID(),
+			Type:            "text",
+			X:               legendX,
+			Y:               legendY + float64(i*18),
+			Width:           80,
+			Height:          16,
+			StrokeColor:     t.Color,
+			BackgroundColor: "transparent",
+			FillStyle:       "solid",
+			StrokeWidth:     1,
+			StrokeStyle:     "solid",
+			Roughness:       0,
+			Opacity:         100,
+			GroupIDs:        []string{},
+			Seed:            randInt(),
+			Version:         1,
+			VersionNonce:    randInt(),
+			Updated:         nowMilli,
+			Text:            t.Name,
+			OriginalText:    t.Name,
+			FontSize:        16,
+			FontFamily:      1,
+			TextAlign:       "left",
+			VerticalAlign:   "top",
+			LineHeight:      1.25,
+		})
+	}
+
+	scene := &Scene{
+		Type:     "excalidraw",
+		Version:  2,
+		Source:   "mcables",
+		Elements: els,
+		AppState: AppState{
+			GridSize:       nil,
+			ViewBackground: "#ffffff",
+		},
+		Files: Files{},
+	}
+	return scene, a
+}
+
+func bindingPtr(b *Binding) *Binding {
+	if b == nil {
+		return nil
+	}
+	return b
+}
+
+// exportAnchor returns (x,y) + a Binding for the endpoint kind passed in.
+func exportAnchor(portID, deviceID, ioID *int64, snap *db.Snapshot,
+	devElID, portElID, ioElID map[int64]string,
+) ([2]float64, *Binding) {
+	if portID != nil {
+		// Find the port + its parent device.
+		for _, p := range snap.Ports {
+			if p.ID != *portID {
+				continue
+			}
+			for _, d := range snap.Devices {
+				if d.ID == p.DeviceID {
+					id := portElID[p.ID]
+					return [2]float64{d.X + p.XOffset, d.Y + p.YOffset}, &Binding{ElementID: id, Focus: 0, Gap: 1}
+				}
+			}
+		}
+	}
+	if deviceID != nil {
+		for _, d := range snap.Devices {
+			if d.ID != *deviceID {
+				continue
+			}
+			id := devElID[d.ID]
+			return [2]float64{d.X + d.Width/2, d.Y + d.Height/2}, &Binding{ElementID: id, Focus: 0, Gap: 1}
+		}
+	}
+	if ioID != nil {
+		for _, m := range snap.IOMarkers {
+			if m.ID != *ioID {
+				continue
+			}
+			id := ioElID[m.ID]
+			return [2]float64{m.X + 15, m.Y + 15}, &Binding{ElementID: id, Focus: 0, Gap: 1}
+		}
+	}
+	return [2]float64{}, nil
+}
+
+// Generate21 mints a 21-char base62 identifier, the shape Excalidraw
+// uses for element ids (nanoid-style). crypto/rand source.
+func Generate21() string {
+	const alphabet = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"
+	buf := make([]byte, 21)
+	max := big.NewInt(int64(len(alphabet)))
+	for i := range buf {
+		n, err := rand.Int(rand.Reader, max)
+		if err != nil {
+			// crypto/rand failure is unrecoverable in practice; fall back
+			// to a deterministic alphabet position so callers see a panic-
+			// adjacent symptom rather than a half-initialised id.
+			return fmt.Sprintf("crypto-rand-failed-%d", i)
+		}
+		buf[i] = alphabet[n.Int64()]
+	}
+	return string(buf)
+}
+
+// randInt returns a non-negative int64 derived from crypto/rand for
+// Excalidraw's `seed` / `versionNonce`. Excalidraw treats these as
+// noise — only the IDs and the structural fields matter.
+func randInt() int64 {
+	n, err := rand.Int(rand.Reader, big.NewInt(1<<62))
+	if err != nil {
+		return 0
+	}
+	return n.Int64()
+}
+
+// MarshalScene returns the scene as Excalidraw-flavoured JSON.
+func MarshalScene(s *Scene) ([]byte, error) {
+	return json.Marshal(s)
+}

internal/exporter/exporter_test.go

@@ -0,0 +1,165 @@
+package exporter
+
+import (
+	"encoding/json"
+	"strings"
+	"testing"
+
+	"mgit.msbls.de/m/mcables/internal/db"
+)
+
+// deterministic id generator for tests
+func newSeq() func() string {
+	i := 0
+	return func() string {
+		i++
+		return "id" + strings.Repeat("0", 19-len(itoa(i))) + itoa(i)
+	}
+}
+
+func itoa(i int) string {
+	if i == 0 {
+		return "0"
+	}
+	buf := [20]byte{}
+	pos := len(buf)
+	for i > 0 {
+		pos--
+		buf[pos] = byte('0' + i%10)
+		i /= 10
+	}
+	return string(buf[pos:])
+}
+
+func sampleSnapshot() *db.Snapshot {
+	pid := int64(1)
+	devID := int64(10)
+	devID2 := int64(11)
+	portID := int64(100)
+	portID2 := int64(101)
+	ioID := int64(200)
+
+	return &db.Snapshot{
+		Project: db.Project{ID: pid, Name: "LOFT", DrawingName: "LOFT.excalidraw"},
+		Frames: []db.Frame{
+			{ID: 1, ProjectID: pid, Name: "desk", X: 100, Y: 100, Width: 800, Height: 500},
+		},
+		Devices: []db.Device{
+			{ID: devID, ProjectID: pid, Name: "NAS", Color: "#1e1e1e", X: 200, Y: 200, Width: 100, Height: 35, FrameID: ptr(int64(1))},
+			{ID: devID2, ProjectID: pid, Name: "Switch", Color: "#1e1e1e", X: 400, Y: 200, Width: 100, Height: 35},
+		},
+		Ports: []db.Port{
+			{ID: portID, ProjectID: pid, DeviceID: devID, TypeID: 5, XOffset: 50, YOffset: 35},
+			{ID: portID2, ProjectID: pid, DeviceID: devID2, TypeID: 5, XOffset: 50, YOffset: 35},
+		},
+		IOMarkers: []db.IOMarker{
+			{ID: ioID, ProjectID: pid, Label: "Wall A", X: 50, Y: 50},
+		},
+		Cables: []db.Cable{
+			{ID: 1000, ProjectID: pid, TypeID: 5,
+				FromPortID: &portID, ToPortID: &portID2, Auto: false},
+		},
+		CableTypes: []db.CableType{
+			{ID: 1, Name: "Power", Color: "#e03131"},
+			{ID: 2, Name: "USB", Color: "#2f9e44"},
+			{ID: 3, Name: "HDMI", Color: "#1971c2"},
+			{ID: 4, Name: "DP", Color: "#9c36b5"},
+			{ID: 5, Name: "RJ45", Color: "#ffd500"},
+		},
+	}
+}
+
+func ptr[T any](v T) *T { return &v }
+
+func TestBuildScene_BasicShape(t *testing.T) {
+	snap := sampleSnapshot()
+	scene, ids := BuildScene(snap, 1700000000000, newSeq())
+
+	if scene.Type != "excalidraw" || scene.Version != 2 {
+		t.Errorf("bad header: %+v", scene)
+	}
+	// frame(1) + device-rect+text(2 each) + ports(2) + io+text(2) +
+	// cable(1) + legend(5) = 1 + 4 + 2 + 2 + 1 + 5 = 15.
+	if len(scene.Elements) < 15 {
+		t.Errorf("element count = %d, want ≥15", len(scene.Elements))
+	}
+	if len(ids.Frames) != 1 || len(ids.Devices) != 2 || len(ids.Ports) != 2 ||
+		len(ids.IOMarkers) != 1 || len(ids.Cables) != 1 {
+		t.Errorf("id assignment shape wrong: %+v", ids)
+	}
+}
+
+func TestBuildScene_ReusesExistingExcalidrawIDs(t *testing.T) {
+	snap := sampleSnapshot()
+	// Pre-assign an excalidraw_id on the first device.
+	preset := "preset0000000000000NAS"[:21]
+	snap.Devices[0].ExcalidrawID = &preset
+	_, ids := BuildScene(snap, 1700000000000, newSeq())
+	if ids.Devices[snap.Devices[0].ID] != preset {
+		t.Errorf("preset id not reused: got %q, want %q", ids.Devices[snap.Devices[0].ID], preset)
+	}
+}
+
+func TestBuildScene_ArrowsBindToPorts(t *testing.T) {
+	snap := sampleSnapshot()
+	scene, ids := BuildScene(snap, 1700000000000, newSeq())
+	// The arrow's startBinding should reference the from-port's element id.
+	fromPortElID := ids.Ports[100]
+	toPortElID := ids.Ports[101]
+	var found *Element
+	for i := range scene.Elements {
+		if scene.Elements[i].Type == "arrow" {
+			found = &scene.Elements[i]
+			break
+		}
+	}
+	if found == nil {
+		t.Fatal("no arrow in scene")
+	}
+	if found.StartBinding == nil || found.StartBinding.ElementID != fromPortElID {
+		t.Errorf("start binding wrong: %+v", found.StartBinding)
+	}
+	if found.EndBinding == nil || found.EndBinding.ElementID != toPortElID {
+		t.Errorf("end binding wrong: %+v", found.EndBinding)
+	}
+}
+
+func TestBuildScene_BundlesIgnored(t *testing.T) {
+	snap := sampleSnapshot()
+	// Snapshot.Bundles is unused in the exporter for v0 per design §4.1.
+	// Add some and confirm no bundle elements appear in the scene.
+	snap.Bundles = []db.Bundle{{ID: 1, Name: "trunk", CableIDs: []int64{1000}}}
+	scene, _ := BuildScene(snap, 1700000000000, newSeq())
+	for _, e := range scene.Elements {
+		if strings.Contains(e.Type, "bundle") {
+			t.Errorf("bundle element leaked into scene: %+v", e)
+		}
+	}
+}
+
+func TestMarshalScene_IsJSON(t *testing.T) {
+	snap := sampleSnapshot()
+	scene, _ := BuildScene(snap, 1700000000000, newSeq())
+	b, err := MarshalScene(scene)
+	if err != nil {
+		t.Fatalf("marshal: %v", err)
+	}
+	var roundtrip map[string]any
+	if err := json.Unmarshal(b, &roundtrip); err != nil {
+		t.Fatalf("roundtrip: %v", err)
+	}
+	if roundtrip["type"] != "excalidraw" {
+		t.Errorf("type field = %v, want excalidraw", roundtrip["type"])
+	}
+}
+
+func TestGenerate21(t *testing.T) {
+	a := Generate21()
+	b := Generate21()
+	if len(a) != 21 || len(b) != 21 {
+		t.Errorf("len wrong: %d / %d", len(a), len(b))
+	}
+	if a == b {
+		t.Errorf("ids collide: %q == %q", a, b)
+	}
+}

internal/server/export.go

@@ -0,0 +1,122 @@
+package server
+
+import (
+	"bytes"
+	"context"
+	"encoding/json"
+	"errors"
+	"fmt"
+	"io"
+	"net/http"
+	"os"
+	"strings"
+	"time"
+
+	"mgit.msbls.de/m/mcables/internal/db"
+	"mgit.msbls.de/m/mcables/internal/exporter"
+)
+
+// syncExport runs the project's snapshot through the exporter, persists
+// the assigned excalidraw_ids, then PUTs the scene to mxdrw.msbls.de.
+func (h *handlers) syncExport(w http.ResponseWriter, r *http.Request) {
+	pid, ok := parseInt64Path(r, "pid")
+	if !ok {
+		writeError(w, db.ErrInvalidInput, "pid must be a positive integer")
+		return
+	}
+
+	base := os.Getenv("MEXDRAW_BASE_URL")
+	if base == "" {
+		base = "https://mxdrw.msbls.de"
+	}
+	user := os.Getenv("MEXDRAW_USER")
+	pass := os.Getenv("MEXDRAW_PASS")
+	if user == "" || pass == "" {
+		writeJSON(w, http.StatusBadRequest, errorBody{
+			Error:   "MEXDRAW_USER / MEXDRAW_PASS not set",
+			Details: "Add MEXDRAW_USER and MEXDRAW_PASS to /home/m/secrets/mcables/.env on mDock and restart the container — mxdrw expects HTTP Basic Auth",
+		})
+		return
+	}
+
+	snap, err := h.store.Snapshot(pid)
+	if err != nil {
+		writeError(w, err, nil)
+		return
+	}
+
+	now := time.Now().UnixMilli()
+	scene, ids := exporter.BuildScene(snap, now, exporter.Generate21)
+
+	// Persist the freshly-assigned ids so the next export reuses them.
+	// We pass in the full maps; PersistExcalidrawIDs is idempotent (it
+	// only updates rows whose excalidraw_id is still NULL).
+	if err := h.store.PersistExcalidrawIDs(pid, ids.Frames, ids.Devices, ids.Ports, ids.IOMarkers, ids.Cables); err != nil {
+		writeError(w, fmt.Errorf("persist excalidraw_ids: %w", err), nil)
+		return
+	}
+
+	payload, err := exporter.MarshalScene(scene)
+	if err != nil {
+		writeError(w, fmt.Errorf("marshal scene: %w", err), nil)
+		return
+	}
+
+	drawingName := snap.Project.DrawingName
+	if !strings.HasSuffix(drawingName, ".excalidraw") {
+		drawingName += ".excalidraw"
+	}
+	url := strings.TrimSuffix(base, "/") + "/api/drawings/" + drawingName
+
+	// Sane network timeout; mxdrw is on the LAN so this should be quick.
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	req, err := http.NewRequestWithContext(ctx, http.MethodPut, url, bytes.NewReader(payload))
+	if err != nil {
+		writeError(w, fmt.Errorf("build PUT: %w", err), nil)
+		return
+	}
+	req.Header.Set("Content-Type", "application/json")
+	req.SetBasicAuth(user, pass)
+
+	resp, err := http.DefaultClient.Do(req)
+	if err != nil {
+		writeJSON(w, http.StatusBadGateway, errorBody{
+			Error:   "mxdrw unreachable",
+			Details: err.Error(),
+		})
+		return
+	}
+	defer resp.Body.Close()
+	body, _ := io.ReadAll(resp.Body)
+	if resp.StatusCode >= 400 {
+		writeJSON(w, http.StatusBadGateway, errorBody{
+			Error: fmt.Sprintf("mxdrw rejected upload (%d)", resp.StatusCode),
+			Details: map[string]any{
+				"status": resp.StatusCode,
+				"body":   string(body),
+				"url":    url,
+			},
+		})
+		return
+	}
+
+	// Best-effort parse — mxdrw returns whatever it returns; we surface
+	// the public viewer URL no matter what.
+	var serverEcho any
+	_ = json.Unmarshal(body, &serverEcho)
+
+	viewerURL := strings.TrimSuffix(base, "/") + "/draw/" + strings.TrimSuffix(drawingName, ".excalidraw") + ".excalidraw"
+	writeJSON(w, http.StatusOK, map[string]any{
+		"ok":           true,
+		"drawing_name": drawingName,
+		"url":          viewerURL,
+		"element_count": len(scene.Elements),
+		"mxdrw_response": serverEcho,
+	})
+}
+
+// noLeak prevents unused-import errors if errors-pkg ever becomes unused
+// after a refactor — keeps the import light.
+var _ = errors.New

internal/server/ports.go

@@ -0,0 +1,114 @@
+package server
+
+import (
+	"encoding/json"
+	"errors"
+	"net/http"
+
+	"mgit.msbls.de/m/mcables/internal/db"
+)
+
+type portCreate struct {
+	TypeID  int64   `json:"type_id"`
+	Label   string  `json:"label,omitempty"`
+	XOffset float64 `json:"x_offset"`
+	YOffset float64 `json:"y_offset"`
+}
+
+type portPatch struct {
+	TypeID  *int64   `json:"type_id,omitempty"`
+	Label   *string  `json:"label,omitempty"`
+	XOffset *float64 `json:"x_offset,omitempty"`
+	YOffset *float64 `json:"y_offset,omitempty"`
+}
+
+func (h *handlers) listPortsForDevice(w http.ResponseWriter, r *http.Request) {
+	pid, ok := parseInt64Path(r, "pid")
+	if !ok {
+		writeError(w, db.ErrInvalidInput, "pid must be a positive integer")
+		return
+	}
+	id, ok := parseInt64Path(r, "id")
+	if !ok {
+		writeError(w, db.ErrInvalidInput, "id must be a positive integer")
+		return
+	}
+	ps, err := h.store.ListPortsForDevice(pid, id)
+	if err != nil {
+		writeError(w, err, nil)
+		return
+	}
+	writeJSON(w, http.StatusOK, ps)
+}
+
+func (h *handlers) createPort(w http.ResponseWriter, r *http.Request) {
+	pid, ok := parseInt64Path(r, "pid")
+	if !ok {
+		writeError(w, db.ErrInvalidInput, "pid must be a positive integer")
+		return
+	}
+	id, ok := parseInt64Path(r, "id")
+	if !ok {
+		writeError(w, db.ErrInvalidInput, "id must be a positive integer")
+		return
+	}
+	var body portCreate
+	if err := json.NewDecoder(r.Body).Decode(&body); err != nil {
+		writeError(w, errors.Join(db.ErrInvalidInput, err), nil)
+		return
+	}
+	p, err := h.store.CreatePort(pid, id, db.PortCreate{
+		TypeID: body.TypeID, Label: body.Label,
+		XOffset: body.XOffset, YOffset: body.YOffset,
+	})
+	if err != nil {
+		writeError(w, err, nil)
+		return
+	}
+	writeJSON(w, http.StatusCreated, p)
+}
+
+func (h *handlers) patchPort(w http.ResponseWriter, r *http.Request) {
+	pid, ok := parseInt64Path(r, "pid")
+	if !ok {
+		writeError(w, db.ErrInvalidInput, "pid must be a positive integer")
+		return
+	}
+	id, ok := parseInt64Path(r, "id")
+	if !ok {
+		writeError(w, db.ErrInvalidInput, "id must be a positive integer")
+		return
+	}
+	var body portPatch
+	if err := json.NewDecoder(r.Body).Decode(&body); err != nil {
+		writeError(w, errors.Join(db.ErrInvalidInput, err), nil)
+		return
+	}
+	p, err := h.store.UpdatePort(pid, id, db.PortUpdate{
+		TypeID: body.TypeID, Label: body.Label,
+		XOffset: body.XOffset, YOffset: body.YOffset,
+	})
+	if err != nil {
+		writeError(w, err, nil)
+		return
+	}
+	writeJSON(w, http.StatusOK, p)
+}
+
+func (h *handlers) deletePort(w http.ResponseWriter, r *http.Request) {
+	pid, ok := parseInt64Path(r, "pid")
+	if !ok {
+		writeError(w, db.ErrInvalidInput, "pid must be a positive integer")
+		return
+	}
+	id, ok := parseInt64Path(r, "id")
+	if !ok {
+		writeError(w, db.ErrInvalidInput, "id must be a positive integer")
+		return
+	}
+	if err := h.store.DeletePort(pid, id); err != nil {
+		writeError(w, err, nil)
+		return
+	}
+	w.WriteHeader(http.StatusNoContent)
+}

internal/server/server.go

@@ -51,6 +51,12 @@ func New(store *db.Store, frontend fs.FS) http.Handler {
 	mux.HandleFunc("PATCH /api/projects/{pid}/io-markers/{id}", h.patchIOMarker)
 	mux.HandleFunc("DELETE /api/projects/{pid}/io-markers/{id}", h.deleteIOMarker)
 
+	// Ports — slice 7 lets m add/edit/remove instance ports on a device.
+	mux.HandleFunc("GET /api/projects/{pid}/devices/{id}/ports", h.listPortsForDevice)
+	mux.HandleFunc("POST /api/projects/{pid}/devices/{id}/ports", h.createPort)
+	mux.HandleFunc("PATCH /api/projects/{pid}/ports/{id}", h.patchPort)
+	mux.HandleFunc("DELETE /api/projects/{pid}/ports/{id}", h.deletePort)
+
 	// Device-type catalog. Built-ins are read-only; project-custom rows
 	// support full CRUD scoped to the project.
 	mux.HandleFunc("GET /api/device-types", h.listBuiltInDeviceTypes)
@@ -84,6 +90,9 @@ func New(store *db.Store, frontend fs.FS) http.Handler {
 	mux.HandleFunc("GET /api/setup-templates", h.listSetupTemplates)
 	mux.HandleFunc("POST /api/projects/{pid}/apply-template", h.applyTemplate)
 
+	// Slice 8 — export to mxdrw.msbls.de
+	mux.HandleFunc("POST /api/projects/{pid}/sync/export", h.syncExport)
+
 	// Frontend (embedded). Serve "/" → index.html via http.FileServerFS.
 	// Wrap in noCache so the browser revalidates with the ETag/Last-Modified
 	// the file server already emits — without this, browsers cache aggressively

internal/server/solver.go

@@ -108,7 +108,27 @@ func (h *handlers) applyTemplate(w http.ResponseWriter, r *http.Request) {
 		writeError(w, err, nil)
 		return
 	}
-	writeJSON(w, http.StatusOK, res)
+
+	// Auto-solve by default. ?solve=0 opts out for power users who want
+	// to inspect the seeded devices/requirements before the solver runs.
+	// This is THE fix for the v6 UX hole: m hit Apply, saw an empty
+	// canvas because nothing reloaded *and* nothing solved. With the
+	// frontend re-snapshotting after the POST returns and the response
+	// already carrying solver output, m sees the wired diagram in one click.
+	skipSolve := r.URL.Query().Get("solve") == "0"
+	combined := map[string]any{"template_apply": res}
+	if !skipSolve {
+		solveRes, err := h.store.Solve(pid, false)
+		if err != nil {
+			// Apply succeeded but Solve failed — don't 500 the whole
+			// call. Return template_apply with the solve error inline so
+			// the UI can recover (devices are there; m can re-solve).
+			combined["solve_error"] = err.Error()
+		} else {
+			combined["solve"] = solveRes
+		}
+	}
+	writeJSON(w, http.StatusOK, combined)
 }
 
 // fmtSscan parses a base-10 int from a string, returning (n, nil) on success.

web/static/index.html

@@ -22,9 +22,8 @@
     <div class="topbar-spacer"></div>
     <button type="button" id="btn-apply-template" class="btn">Apply template…</button>
     <button type="button" id="btn-solve" class="btn btn-primary">Solve</button>
-    <button type="button" id="btn-export" class="btn" disabled title="Slice 8">
-      Export
-    </button>
+    <button type="button" id="btn-export" class="btn">Export</button>
+    <span id="toast" class="toast" hidden></span>
   </header>
 
   <main class="layout">
@@ -46,7 +45,7 @@
           <li><button type="button" id="tool-device" class="btn btn-tiny" data-tool="device">+ Device</button></li>
           <li><button type="button" id="tool-io"     class="btn btn-tiny" data-tool="io">+ IO</button></li>
           <li><button type="button" id="tool-req"    class="btn btn-tiny" data-tool="req">Drag req A→B</button></li>
-          <li><button type="button" class="btn btn-tiny" disabled title="Slice 7">Draw cable</button></li>
+          <li><button type="button" id="tool-cable"  class="btn btn-tiny" data-tool="cable" title="Click a port to start, then click another port / device / IO marker">Draw cable</button></li>
         </ul>
       </section>
     </aside>

web/static/main.js

@@ -56,8 +56,13 @@ const state = {
   /** @type {Bundle[]} */ bundles: [],
   /** @type {SetupTemplate[]} */ setupTemplates: [],
   activeTypeId: /** @type {number|null} */ (null),
-  /** "frame" | "device" | "io" | "req" | null */
+  /** "frame" | "device" | "io" | "req" | "port" | "cable" | null */
   tool: /** @type {string|null} */ (null),
+  /** Slice-7 transient state for the +Port tool. */
+  portToolDevice: /** @type {number|null} */ (null),
+  portToolTypeID: /** @type {number|null} */ (null),
+  /** Slice-7: when the user clicked a source port, this is its id. */
+  cableDrawFromPortID: /** @type {number|null} */ (null),
   /** @type {{kind: "frame"|"device"|"io"|"cable_type"|"requirement"|"cable"|"bundle", id: number} | null} */ selection: null,
 };
 
@@ -104,6 +109,12 @@ const createIOMarker = (pid, body) => api("POST",   `/projects/${pid}/io-markers
 const patchIOMarker  = (pid, id, body) => api("PATCH",  `/projects/${pid}/io-markers/${id}`, body);
 const deleteIOMarker = (pid, id) => api("DELETE", `/projects/${pid}/io-markers/${id}`);
 
+const createPort = (pid, devId, body) => api("POST", `/projects/${pid}/devices/${devId}/ports`, body);
+const patchPort  = (pid, id, body) => api("PATCH",  `/projects/${pid}/ports/${id}`, body);
+const deletePort = (pid, id) => api("DELETE", `/projects/${pid}/ports/${id}`);
+
+const createCableAPI = (pid, body) => api("POST", `/projects/${pid}/cables`, body);
+
 const listDeviceTypesForProject = (pid) => api("GET", `/projects/${pid}/device-types`);
 
 const createRequirement = (pid, body) => api("POST",   `/projects/${pid}/connection-requirements`, body);
@@ -117,6 +128,7 @@ const solveProject  = (pid, preview) => api("POST", `/projects/${pid}/solve${pre
 const portsAndResolve = (pid, devId, body) => api("POST", `/projects/${pid}/devices/${devId}/ports-and-resolve`, body);
 const listSetupTemplates = () => api("GET", `/setup-templates`);
 const applyTemplate = (pid, body) => api("POST", `/projects/${pid}/apply-template`, body);
+const syncExport     = (pid) => api("POST", `/projects/${pid}/sync/export`, {});
 
 // ---------- DOM helpers ---------- //
 
@@ -305,11 +317,15 @@ function renderCanvas() {
       const cx = d.x + prt.x_offset;
       const cy = d.y + prt.y_offset;
       const color = cableTypeColor.get(prt.type_id) || "#888";
+      const cls = "port-circle" + (state.cableDrawFromPortID === prt.id ? " cable-from" : "");
       const c = svgEl("circle", {
         cx, cy, r: 5,
-        class: "port-circle",
+        class: cls,
         stroke: color,
+        "data-port-id": prt.id,
       });
+      // Slice 7: port-click drives the manual cable-draw flow.
+      c.addEventListener("pointerdown", (e) => onPortPointerDown(e, prt));
       g.append(c);
     }
 
@@ -339,7 +355,17 @@ function renderCanvas() {
     label.textContent = m.label;
     g.append(rect, label);
     gIO.append(g);
-    rect.addEventListener("pointerdown", (e) => startDrag(e, "io", m.id));
+    rect.addEventListener("pointerdown", (e) => {
+      // Slice 7: if a cable draw is in progress, terminate the cable on
+      // this IO marker instead of starting a drag.
+      if (state.cableDrawFromPortID != null) {
+        e.stopPropagation();
+        e.preventDefault();
+        finishCableDrawAtIO(m);
+        return;
+      }
+      startDrag(e, "io", m.id);
+    });
   }
 
   // Cables — straight lines between resolved endpoint anchors.
@@ -469,9 +495,25 @@ function renderInspectorCable(body, id) {
   body.querySelector("#cab-type").textContent = ct ? `${ct.name}` : `type #${c.type_id}`;
   body.querySelector("#cab-from").textContent = fromLabel;
   body.querySelector("#cab-to").textContent = toLabel;
-  body.querySelector("#cab-driver").textContent = drivingReq
-    ? `requirement #${drivingReq.id}`
-    : (c.auto ? "(no matching requirement)" : "—");
+  const driverCell = body.querySelector("#cab-driver");
+  if (drivingReq) {
+    const deviceByID2 = new Map(state.devices.map((d) => [d.id, d]));
+    const an = deviceByID2.get(drivingReq.from_device_id)?.name ?? "?";
+    const bn = deviceByID2.get(drivingReq.to_device_id)?.name ?? "?";
+    const link = document.createElement("button");
+    link.type = "button";
+    link.className = "btn-link";
+    link.style.padding = "0";
+    link.textContent = `${an} ↔ ${bn}`;
+    link.title = "Jump to this requirement";
+    link.addEventListener("click", () => {
+      state.selection = { kind: "requirement", id: drivingReq.id };
+      render();
+    });
+    driverCell.append(link);
+  } else {
+    driverCell.textContent = c.auto ? "(no matching requirement)" : "—";
+  }
 
   if (c.auto) {
     body.querySelector("#cab-promote").addEventListener("click", async () => {
@@ -557,10 +599,12 @@ function renderInspectorDevice(body, id) {
 
   const portsHtml = ports.length
     ? ports.map((p) => `
-        <div class="port-row">
+        <div class="port-row" data-port-id="${p.id}">
           <span class="swatch" style="background:${cableTypeColor.get(p.type_id) || "#888"}"></span>
           <span class="label">${escapeHtml(p.label ?? cableTypeName.get(p.type_id) ?? "Port")}</span>
-          <span class="conn">unconnected</span>
+          <span class="conn">
+            <button type="button" class="btn-link port-del" data-port-id="${p.id}" title="Delete port">×</button>
+          </span>
         </div>`).join("")
     : `<p class="muted" style="font-size:12px">No ports yet.</p>`;
 
@@ -607,6 +651,9 @@ function renderInspectorDevice(body, id) {
     </dl>
     <p class="section-title">Ports</p>
     <div id="dev-ports">${portsHtml}</div>
+    <div class="inspector-actions" style="margin-top: 4px;">
+      <button type="button" class="btn btn-tiny" id="dev-add-port">+ Port</button>
+    </div>
     <p class="section-title">Requirements</p>
     <div id="dev-reqs">${reqsHtml}</div>
     <div class="inspector-actions">
@@ -669,6 +716,35 @@ function renderInspectorDevice(body, id) {
       render();
     });
   });
+
+  // +Port — arms the port-placement gesture. Active cable type comes
+  // from the legend selection; if none, defaults to the first cable_type.
+  body.querySelector("#dev-add-port").addEventListener("click", () => {
+    if (!state.active) return;
+    const typeID = state.activeTypeId ?? state.cableTypes[0]?.id;
+    if (!typeID) { alert("Pick a cable type in the legend first"); return; }
+    armPortTool(d.id, typeID);
+  });
+
+  // Per-port delete.
+  body.querySelectorAll(".port-del").forEach((btn) => {
+    btn.addEventListener("click", async (e) => {
+      e.stopPropagation();
+      if (!state.active) return;
+      const pid = Number(btn.getAttribute("data-port-id"));
+      if (!pid) return;
+      if (!confirm("Delete this port?")) return;
+      try {
+        await deletePort(state.active.id, pid);
+        state.ports = state.ports.filter((p) => p.id !== pid);
+        // Cables that referenced the port get from_port_id/to_port_id
+        // set to NULL by the schema — refresh from snapshot.
+        const snap = await getSnapshot(state.active.id);
+        state.cables = snap.cables || [];
+        render();
+      } catch (ex) { alert(`Delete failed: ${ex.message}`); }
+    });
+  });
 }
 
 function renderInspectorRequirement(body, id) {
@@ -1120,9 +1196,25 @@ function armTool(tool) {
   const wrap = $(".canvas-wrap");
   wrap.classList.toggle("tool-frame",  tool === "frame");
   wrap.classList.toggle("tool-device", tool === "device");
+  wrap.classList.toggle("tool-port",   tool === "port");
+  wrap.classList.toggle("tool-cable",  tool === "cable");
   for (const btn of document.querySelectorAll("[data-tool]")) {
     btn.classList.toggle("armed", btn.getAttribute("data-tool") === tool);
   }
+  if (tool !== "port") {
+    state.portToolDevice = null;
+    state.portToolTypeID = null;
+  }
+  if (tool !== "cable") {
+    state.cableDrawFromPortID = null;
+  }
+}
+
+/** Slice 7: device inspector arms +Port for a specific device + type. */
+function armPortTool(deviceID, typeID) {
+  state.portToolDevice = deviceID;
+  state.portToolTypeID = typeID;
+  armTool("port");
 }
 
 function bindTools() {
@@ -1134,7 +1226,7 @@ function bindTools() {
     // Avoid stealing keys while user is typing into an input.
     const tag = (e.target instanceof HTMLElement) ? e.target.tagName : "";
     if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
-    if (e.key === "Escape") { armTool(null); cancelInlineNamer(); state.selection = null; render(); }
+    if (e.key === "Escape") { armTool(null); cancelInlineNamer(); state.cableDrawFromPortID = null; state.selection = null; render(); }
     else if (e.key === "f" || e.key === "F") armTool("frame");
     else if (e.key === "d" || e.key === "D") armTool("device");
     else if (e.key === "i" || e.key === "I") armTool("io");
@@ -1176,6 +1268,11 @@ function onCanvasPointerDown(e) {
     placeDeviceAt(p);
     return;
   }
+  if (state.tool === "port") {
+    e.preventDefault();
+    placePortAt(p);
+    return;
+  }
   if (state.tool === "io") {
     e.preventDefault();
     placeIOMarkerAt(p);
@@ -1354,6 +1451,136 @@ function openNewDeviceModal(geom) {
   };
 }
 
+/** Snap (x, y) onto the closest edge of `device`. Returns the (x_off,
+ *  y_off) relative to the device's top-left + a debug-friendly edge name. */
+function snapToDeviceEdge(device, x, y) {
+  // Distance from the point to each of the four edges.
+  const dxLeft   = Math.abs(x - device.x);
+  const dxRight  = Math.abs((device.x + device.width)  - x);
+  const dyTop    = Math.abs(y - device.y);
+  const dyBottom = Math.abs((device.y + device.height) - y);
+  const min = Math.min(dxLeft, dxRight, dyTop, dyBottom);
+  // Clamp the perpendicular coordinate so the port sits *on* the rect.
+  const localX = Math.max(0, Math.min(device.width,  x - device.x));
+  const localY = Math.max(0, Math.min(device.height, y - device.y));
+  if (min === dxLeft)   return { xOff: 0,             yOff: localY, edge: "left"   };
+  if (min === dxRight)  return { xOff: device.width,  yOff: localY, edge: "right"  };
+  if (min === dyTop)    return { xOff: localX,        yOff: 0,      edge: "top"    };
+  return                       { xOff: localX,        yOff: device.height, edge: "bottom" };
+}
+
+/** Port-click flow:
+ *  1) No source picked yet → this port becomes the source. Highlight it.
+ *  2) Source already picked → this port is the target. POST a cable
+ *     with `from_port_id` / `to_port_id`, type from the source port,
+ *     auto=0. Shift-click flips the target to "bind to whole device"
+ *     (uses `to_device_id` instead). */
+function onPortPointerDown(e, port) {
+  if (!state.active) return;
+  if (state.tool && state.tool !== "cable") return; // other tool wins
+  e.stopPropagation();
+  e.preventDefault();
+  if (state.cableDrawFromPortID == null) {
+    state.cableDrawFromPortID = port.id;
+    armTool("cable"); // get the crosshair cursor + visual cue
+    render();
+    return;
+  }
+  if (state.cableDrawFromPortID === port.id) {
+    // Cancel — clicked the same port again.
+    state.cableDrawFromPortID = null;
+    armTool(null);
+    render();
+    return;
+  }
+  finishCableDrawAt(port, e.shiftKey);
+}
+
+async function finishCableDrawAt(targetPort, shiftKey) {
+  if (!state.active) return;
+  const fromPortID = state.cableDrawFromPortID;
+  state.cableDrawFromPortID = null;
+  armTool(null);
+  if (fromPortID == null) return;
+  const sourcePort = state.ports.find((p) => p.id === fromPortID);
+  if (!sourcePort) { render(); return; }
+
+  // Body: shift-click on a port = bind to that port's parent device
+  // (whole-device cable) instead of the port. Plain click = port-to-port.
+  const body = {
+    type_id: sourcePort.type_id,
+    auto: false,
+    from: { port_id: fromPortID },
+    to: shiftKey ? { device_id: targetPort.device_id } : { port_id: targetPort.id },
+  };
+  if (!shiftKey && targetPort.type_id !== sourcePort.type_id) {
+    if (!confirm(`Target port is a different cable type. Connect anyway?`)) {
+      render();
+      return;
+    }
+  }
+  try {
+    const c = await createCableAPI(state.active.id, body);
+    state.cables.push(c);
+    state.selection = { kind: "cable", id: c.id };
+    render();
+  } catch (e) {
+    alert(`Create cable failed: ${e.message}`);
+    render();
+  }
+}
+
+/** Click on an IO marker while a cable draw is in progress → terminate
+ *  the cable on that IO. Plugged into the IO marker's pointerdown
+ *  handler in renderCanvas. */
+async function finishCableDrawAtIO(ioMarker) {
+  if (!state.active) return;
+  const fromPortID = state.cableDrawFromPortID;
+  state.cableDrawFromPortID = null;
+  armTool(null);
+  if (fromPortID == null) return;
+  const sourcePort = state.ports.find((p) => p.id === fromPortID);
+  if (!sourcePort) { render(); return; }
+  const body = {
+    type_id: sourcePort.type_id,
+    auto: false,
+    from: { port_id: fromPortID },
+    to: { io_id: ioMarker.id },
+  };
+  try {
+    const c = await createCableAPI(state.active.id, body);
+    state.cables.push(c);
+    state.selection = { kind: "cable", id: c.id };
+    render();
+  } catch (e) {
+    alert(`Create cable failed: ${e.message}`);
+    render();
+  }
+}
+
+async function placePortAt(p) {
+  if (!state.active) return;
+  const did = state.portToolDevice;
+  const tid = state.portToolTypeID;
+  if (did == null || tid == null) { armTool(null); return; }
+  const dev = state.devices.find((d) => d.id === did);
+  if (!dev) { armTool(null); return; }
+  const snap = snapToDeviceEdge(dev, p.x, p.y);
+  try {
+    const port = await createPort(state.active.id, did, {
+      type_id: tid,
+      x_offset: snap.xOff,
+      y_offset: snap.yOff,
+    });
+    state.ports.push(port);
+    armTool(null);
+    render();
+  } catch (e) {
+    alert(`Add port failed: ${e.message}`);
+    armTool(null);
+  }
+}
+
 async function placeIOMarkerAt(p) {
   if (!state.active) return;
   armTool(null);
@@ -1829,21 +2056,25 @@ async function openApplyTemplateModal() {
       if (did) skip.push(did);
     });
     try {
-      await applyTemplate(state.active.id, {
+      // The server auto-solves by default since v0c7d165 — the response
+      // is {template_apply, solve} (or {template_apply, solve_error}).
+      // We don't need to read the body here; activateProject() below
+      // pulls a fresh snapshot that includes both the seeded devices
+      // and any cables the solver placed.
+      const projID = state.active.id;
+      await applyTemplate(projID, {
         template_id: tid,
         name_overrides: overrides,
         skip_devices: skip,
       });
-      const snap = await getSnapshot(state.active.id);
-      state.frames = snap.frames || [];
-      state.devices = snap.devices || [];
-      state.ports = snap.ports || [];
-      state.ioMarkers = snap.io_markers || [];
-      state.requirements = snap.connection_requirements || [];
-      state.cables = snap.cables || [];
-      state.bundles = snap.bundles || [];
       dlg.close();
-      render();
+      // Route through the canonical project-load path. That re-hydrates
+      // ALL collections (frames, devices, ports, io_markers, cables,
+      // bundles, requirements, cable_types, device_types) AND clears
+      // the selection — important because m may have had a stale
+      // selection from before the apply. Slice 6's bare re-snapshot
+      // missed the device_types refresh + selection reset.
+      await activateProject(projID);
     } catch (ex) {
       showError(err, ex.message || "Apply failed");
     }
@@ -1882,6 +2113,40 @@ function renderTemplatePreview(preview, templateIDStr) {
   `;
 }
 
+// ---------- export flow ---------- //
+
+let toastTimer = null;
+
+function showToast(kind, html, holdMs = 5000) {
+  const t = $("#toast");
+  t.className = "toast " + (kind || "");
+  t.innerHTML = html;
+  setHidden(t, false);
+  if (toastTimer) clearTimeout(toastTimer);
+  toastTimer = setTimeout(() => { setHidden(t, true); t.innerHTML = ""; }, holdMs);
+}
+
+async function exportCurrentProject() {
+  if (!state.active) { alert("Pick a project first"); return; }
+  const btn = $("#btn-export");
+  btn.disabled = true;
+  showToast("", "Exporting…", 30000);
+  try {
+    const res = await syncExport(state.active.id);
+    const url = res.url ?? "(no url)";
+    const count = res.element_count ?? 0;
+    showToast("ok",
+      `Exported ${count} elements → <a href="${escapeHtml(url)}" target="_blank" rel="noopener">${escapeHtml(url)}</a>`,
+      8000);
+  } catch (e) {
+    // Surface mxdrw unreachability or the upstream error verbatim.
+    const detail = typeof e.details === "object" ? JSON.stringify(e.details) : (e.details ?? "");
+    showToast("error", `Export failed: ${escapeHtml(e.message)}${detail ? ` (${escapeHtml(String(detail))})` : ""}`, 12000);
+  } finally {
+    btn.disabled = false;
+  }
+}
+
 // ---------- boot ---------- //
 
 async function boot() {
@@ -1903,6 +2168,7 @@ async function boot() {
   });
   $("#btn-solve").addEventListener("click", openSolveModal);
   $("#btn-apply-template").addEventListener("click", openApplyTemplateModal);
+  $("#btn-export").addEventListener("click", exportCurrentProject);
 
   $("#project-select").addEventListener("change", (e) => {
     const v = /** @type {HTMLSelectElement} */ (e.target).value;

web/static/style.css

@@ -213,7 +213,46 @@ body {
 .canvas-wrap.tool-device #canvas,
 .canvas-wrap.tool-device #canvas *,
 .canvas-wrap.tool-io     #canvas,
-.canvas-wrap.tool-io     #canvas * { cursor: crosshair !important; }
+.canvas-wrap.tool-io     #canvas *,
+.canvas-wrap.tool-port   #canvas,
+.canvas-wrap.tool-port   #canvas *,
+.canvas-wrap.tool-cable  #canvas,
+.canvas-wrap.tool-cable  #canvas * { cursor: crosshair !important; }
+
+.btn-link {
+  background: transparent;
+  border: 0;
+  color: var(--text-muted);
+  cursor: pointer;
+  font: inherit;
+  padding: 0 4px;
+  line-height: 1;
+}
+.btn-link:hover { color: var(--danger); }
+
+/* Highlight a port that's been picked as the cable-draw source. */
+.port-circle.cable-from {
+  stroke-width: 3;
+  filter: drop-shadow(0 0 4px var(--accent));
+}
+
+/* Header toast — slice 8 export feedback */
+.toast {
+  display: inline-block;
+  margin-left: 12px;
+  font-size: 13px;
+  padding: 4px 10px;
+  border-radius: var(--radius);
+  background: var(--surface-2);
+  color: var(--text);
+  max-width: 420px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.toast.ok    { background: #e8f5e9; color: #1b5e20; }
+.toast.error { background: #fdecea; color: #911313; }
+.toast a { color: inherit; text-decoration: underline; }
 
 /* IO markers — diamonds. Power-by-convention, so the default fill is
    the Power cable_type colour (#e03131). Rotated 45° rect is the
@@ -246,7 +285,7 @@ body {
   fill: #fff;
   stroke: var(--text);
   stroke-width: 2;
-  pointer-events: none;  /* slice 4 — selection happens at device-level */
+  cursor: crosshair;
 }
 
 .port-row {