fix(avatar): attach the Bearer token — the real bug, not propagation delay

Your network capture of the working web-app request showed session
cookies (accessToken, authelia_session) on the attachments.redirect
call. This app authenticates every other request with an Authorization:
Bearer header instead — AvatarBadge's fetch never attached one, sending
a bare unauthenticated GET. Almost certainly a 401 the whole time, for
every avatar image, not just a freshly-uploaded one — a failed fetch
and "no avatar set" render identically here (placeholder icon, no
visible error), so there was nothing on screen to reveal it before now.

Uses KeychainTokenStore() directly, same keychain entry SessionStore
already reads, rather than threading a token through every AvatarBadge
call site. Kept the retry loop from the previous attempt too — genuinely
useful insurance against upload-consistency timing, just not the actual
cause here.

OutlineKit/Sources/OutlineKit/Caching/CachingOutlineAPIClient.swift

@@ -335,6 +335,26 @@ public actor CachingOutlineAPIClient: OutlineAPIClient {
         try await live.currentUser()
     }
 
+    public func createAttachment(_ request: CreateAttachmentRequest) async throws -> CreateAttachmentResult {
+        try await live.createAttachment(request)
+    }
+
+    public func uploadAttachmentFile(_ result: CreateAttachmentResult, fileData: Data) async throws {
+        try await live.uploadAttachmentFile(result, fileData: fileData)
+    }
+
+    public func deleteAttachment(id: String) async throws {
+        try await live.deleteAttachment(id: id)
+    }
+
+    public func updateUserAvatar(_ request: UpdateUserAvatarRequest) async throws -> OutlineUser {
+        try await live.updateUserAvatar(request)
+    }
+
+    public func updateUserName(_ request: UpdateUserNameRequest) async throws -> OutlineUser {
+        try await live.updateUserName(request)
+    }
+
     // MARK: - Sync management (Settings surface)
 
     public func pendingOperations() async -> [PendingOperationSummary] {

OutlineKit/Sources/OutlineKit/Core/OutlineAPIClient.swift

@@ -69,4 +69,18 @@ public protocol OutlineAPIClient: Sendable {
     func deleteStar(id: String) async throws
 
     func currentUser() async throws -> OutlineUser
+
+    /// Two-step presigned upload: this requests where/how to upload,
+    /// `uploadAttachmentFile` performs the actual multipart POST to that
+    /// target. See `OutlineAttachment`/`CreateAttachmentResult`.
+    func createAttachment(_ request: CreateAttachmentRequest) async throws -> CreateAttachmentResult
+    func uploadAttachmentFile(_ result: CreateAttachmentResult, fileData: Data) async throws
+    /// Best-effort — matches the shape every other simple `id`-only delete
+    /// in this API uses (`pins.delete`, `stars.delete`, …), not confirmed
+    /// against a live server specifically for attachments yet.
+    func deleteAttachment(id: String) async throws
+    /// `users.update`, avatar only. See `UpdateUserAvatarRequest`.
+    func updateUserAvatar(_ request: UpdateUserAvatarRequest) async throws -> OutlineUser
+    /// `users.update`, name only. See `UpdateUserNameRequest`.
+    func updateUserName(_ request: UpdateUserNameRequest) async throws -> OutlineUser
 }

OutlineKit/Sources/OutlineKit/LiveOutlineAPIClient.swift

@@ -229,6 +229,67 @@ public actor LiveOutlineAPIClient: OutlineAPIClient {
         try await post("users.info", body: EmptyParams())
     }
 
+    public func createAttachment(_ request: CreateAttachmentRequest) async throws -> CreateAttachmentResult {
+        try await post("attachments.create", body: request)
+    }
+
+    /// No Bearer/CSRF header attached here, deliberately — the presigned
+    /// `form.sig` field (short-lived, scoped to this exact upload key) is
+    /// what authorizes this specific request, the same way an S3 presigned
+    /// POST works. Best-effort against a live server: if it turns out the
+    /// self-hosted local-storage backend also wants a bearer token here,
+    /// that's a one-line addition once confirmed, not a design change.
+    public func uploadAttachmentFile(_ result: CreateAttachmentResult, fileData: Data) async throws {
+        let (body, contentType) = MultipartFormDataBuilder.build(
+            fields: result.form,
+            fileFieldName: "file",
+            fileName: result.attachment.name ?? "avatar",
+            fileData: fileData,
+            fileContentType: result.form["Content-Type"] ?? "application/octet-stream"
+        )
+
+        // `uploadUrl` is a host-relative path (e.g. "/api/files.create") on
+        // a self-hosted local-storage backend, not an absolute S3 URL —
+        // resolving against `baseURL` handles both: `URL(string:relativeTo:)`
+        // replaces the whole path for a leading-slash relative string per
+        // RFC 3986, same resolution already used for user/team avatar URLs.
+        guard let uploadURL = URL(string: result.uploadUrl, relativeTo: baseURL)?.absoluteURL else {
+            throw OutlineAPIError.transport(URLError(.badURL))
+        }
+
+        var request = URLRequest(url: uploadURL)
+        request.httpMethod = "POST"
+        request.setValue(contentType, forHTTPHeaderField: "Content-Type")
+        request.httpBody = body
+
+        let data: Data
+        let response: HTTPURLResponse
+        do {
+            (data, response) = try await httpClient.send(request)
+        } catch let error as OutlineAPIError {
+            throw error
+        } catch {
+            throw OutlineAPIError.transport(error)
+        }
+
+        guard (200...299).contains(response.statusCode) else {
+            let errorEnvelope = try? decoder.decode(OutlineErrorEnvelope.self, from: data)
+            throw OutlineAPIError.server(status: response.statusCode, message: errorEnvelope?.message ?? errorEnvelope?.error)
+        }
+    }
+
+    public func deleteAttachment(id: String) async throws {
+        try await postForSuccess("attachments.delete", body: StarIDParams(id: id))
+    }
+
+    public func updateUserAvatar(_ request: UpdateUserAvatarRequest) async throws -> OutlineUser {
+        try await post("users.update", body: request)
+    }
+
+    public func updateUserName(_ request: UpdateUserNameRequest) async throws -> OutlineUser {
+        try await post("users.update", body: request)
+    }
+
     private func post<Body: Encodable, Response: Decodable>(_ path: String, body: Body) async throws -> Response {
         guard let token = try? tokenStore.token() else {
             throw OutlineAPIError.tokenUnavailable

OutlineKit/Sources/OutlineKit/Models/OutlineAttachment.swift

@@ -0,0 +1,26 @@
+import Foundation
+
+/// One uploaded file — created via a two-step presigned upload
+/// (`attachments.create` for the upload target, then a direct POST to
+/// `uploadUrl`/`form`). Confirmed live against a self-hosted instance's
+/// local-storage backend; `size` comes back as a string there, not a
+/// number — same "don't trust the vendored spec's implied types" lesson as
+/// everywhere else this codebase has hit it.
+public struct OutlineAttachment: Decodable, Identifiable, Sendable {
+    public let id: String
+    public let documentId: String?
+    public let contentType: String?
+    public let name: String?
+    public let url: String?
+    public let size: String?
+}
+
+/// `attachments.create`'s response — everything needed to perform the
+/// actual upload. `form` fields (Content-Type, key, acl, sig, `_csrf`, …)
+/// must all be included as their own multipart parts, in the same request
+/// as the file itself, POSTed to `uploadUrl`.
+public struct CreateAttachmentResult: Decodable, Sendable {
+    public let attachment: OutlineAttachment
+    public let uploadUrl: String
+    public let form: [String: String]
+}

OutlineKit/Sources/OutlineKit/Networking/MultipartFormDataBuilder.swift

@@ -0,0 +1,40 @@
+import Foundation
+
+/// Builds the multipart/form-data body for Outline's presigned-upload
+/// targets (`attachments.create`'s `uploadUrl`/`form`) — an S3-style
+/// presigned POST: every `form` field has to ride along as its own part in
+/// the same request as the file, not as query params or headers.
+enum MultipartFormDataBuilder {
+    static func build(
+        fields: [String: String],
+        fileFieldName: String,
+        fileName: String,
+        fileData: Data,
+        fileContentType: String,
+        boundary: String = "Boundary-\(UUID().uuidString)"
+    ) -> (body: Data, contentType: String) {
+        var body = Data()
+
+        for (key, value) in fields {
+            body.append("--\(boundary)\r\n".utf8Data)
+            body.append("Content-Disposition: form-data; name=\"\(key)\"\r\n\r\n".utf8Data)
+            body.append(value.utf8Data)
+            body.append("\r\n".utf8Data)
+        }
+
+        body.append("--\(boundary)\r\n".utf8Data)
+        body.append(
+            "Content-Disposition: form-data; name=\"\(fileFieldName)\"; filename=\"\(fileName)\"\r\n".utf8Data
+        )
+        body.append("Content-Type: \(fileContentType)\r\n\r\n".utf8Data)
+        body.append(fileData)
+        body.append("\r\n".utf8Data)
+        body.append("--\(boundary)--\r\n".utf8Data)
+
+        return (body, "multipart/form-data; boundary=\(boundary)")
+    }
+}
+
+private extension String {
+    var utf8Data: Data { Data(utf8) }
+}

OutlineKit/Sources/OutlineKit/Requests/CreateAttachmentRequest.swift

@@ -0,0 +1,19 @@
+import Foundation
+
+/// Requests an upload target for a new file — not the upload itself, see
+/// `OutlineAPIClient.uploadAttachmentFile`. `documentId: nil` is what a
+/// user-avatar upload sends (confirmed live); a real value scopes the
+/// attachment to a document instead (e.g. an inline image embed).
+public struct CreateAttachmentRequest: Encodable, Sendable {
+    public let name: String
+    public let contentType: String
+    public let size: Int
+    public let documentId: String?
+
+    public init(name: String, contentType: String, size: Int, documentId: String? = nil) {
+        self.name = name
+        self.contentType = contentType
+        self.size = size
+        self.documentId = documentId
+    }
+}

OutlineKit/Sources/OutlineKit/Requests/UpdateUserAvatarRequest.swift

@@ -0,0 +1,28 @@
+import Foundation
+
+/// `users.update`, scoped to just the avatar. Custom `encode(to:)` because
+/// Swift's synthesized `Encodable` uses `encodeIfPresent` for `Optional`
+/// properties, which *omits* the key entirely when the value is `nil` —
+/// removing the avatar needs a literal `"avatarUrl": null` in the request
+/// body, not the key missing. `id` is required: confirmed live (the
+/// captured request body's length only matches `{"id": "...", "avatarUrl":
+/// ...}`, not a shorter shape without it).
+public struct UpdateUserAvatarRequest: Encodable, Sendable {
+    public let id: String
+    public let avatarUrl: String?
+
+    public init(id: String, avatarUrl: String?) {
+        self.id = id
+        self.avatarUrl = avatarUrl
+    }
+
+    private enum CodingKeys: String, CodingKey {
+        case id, avatarUrl
+    }
+
+    public func encode(to encoder: Encoder) throws {
+        var container = encoder.container(keyedBy: CodingKeys.self)
+        try container.encode(id, forKey: .id)
+        try container.encode(avatarUrl, forKey: .avatarUrl)
+    }
+}

OutlineKit/Sources/OutlineKit/Requests/UpdateUserNameRequest.swift

@@ -0,0 +1,12 @@
+import Foundation
+
+/// `users.update`, name only.
+public struct UpdateUserNameRequest: Encodable, Sendable {
+    public let id: String
+    public let name: String
+
+    public init(id: String, name: String) {
+        self.id = id
+        self.name = name
+    }
+}

OutlineKit/Tests/OutlineKitTests/CachingOutlineAPIClientTests.swift

@@ -89,6 +89,11 @@ private final class StubOutlineAPIClient: OutlineAPIClient, @unchecked Sendable
     func listStars(_ request: ListStarsRequest) async throws -> [OutlineStar] { throw NotStubbed() }
     func deleteStar(id: String) async throws { throw NotStubbed() }
     func currentUser() async throws -> OutlineUser { throw NotStubbed() }
+    func createAttachment(_ request: CreateAttachmentRequest) async throws -> CreateAttachmentResult { throw NotStubbed() }
+    func uploadAttachmentFile(_ result: CreateAttachmentResult, fileData: Data) async throws { throw NotStubbed() }
+    func deleteAttachment(id: String) async throws { throw NotStubbed() }
+    func updateUserAvatar(_ request: UpdateUserAvatarRequest) async throws -> OutlineUser { throw NotStubbed() }
+    func updateUserName(_ request: UpdateUserNameRequest) async throws -> OutlineUser { throw NotStubbed() }
 }
 
 private struct StubTransportError: Error {}

OutlineKit/Tests/OutlineKitTests/LiveOutlineAPIClientTests.swift

@@ -993,6 +993,178 @@ final class LiveOutlineAPIClientTests: XCTestCase {
         XCTAssertEqual(httpClient.lastRequest?.url?.path, "/api/users.list")
     }
 
+    func testUpdateUserAvatarSendsExplicitNullWhenRemoving() async throws {
+        let httpClient = MockHTTPClient()
+        httpClient.responseData = """
+        {
+            "data": {
+                "id": "user-1",
+                "name": "Jane Doe",
+                "avatarUrl": null
+            }
+        }
+        """.data(using: .utf8)!
+
+        let client = LiveOutlineAPIClient(
+            configuration: OutlineConfiguration(baseURL: URL(string: "https://outline.example.com")!),
+            tokenStore: StaticTokenStore(),
+            httpClient: httpClient
+        )
+
+        let user = try await client.updateUserAvatar(UpdateUserAvatarRequest(id: "user-1", avatarUrl: nil))
+
+        XCTAssertNil(user.avatarUrl)
+        XCTAssertEqual(httpClient.lastRequest?.url?.path, "/api/users.update")
+        let sentBody = try XCTUnwrap(httpClient.lastRequest?.httpBody)
+        let sentJSON = try XCTUnwrap(String(data: sentBody, encoding: .utf8))
+        // The whole point of UpdateUserAvatarRequest's custom encode(to:) —
+        // Swift's synthesized Encodable would have omitted the key entirely
+        // for a nil Optional instead of sending a literal null.
+        XCTAssertTrue(sentJSON.contains("\"avatarUrl\":null"), "expected an explicit null, got: \(sentJSON)")
+    }
+
+    func testUpdateUserAvatarSendsTheNewURLWhenSet() async throws {
+        let httpClient = MockHTTPClient()
+        httpClient.responseData = """
+        {
+            "data": {
+                "id": "user-1",
+                "name": "Jane Doe",
+                "avatarUrl": "/api/attachments.redirect?id=abc"
+            }
+        }
+        """.data(using: .utf8)!
+
+        let client = LiveOutlineAPIClient(
+            configuration: OutlineConfiguration(baseURL: URL(string: "https://outline.example.com")!),
+            tokenStore: StaticTokenStore(),
+            httpClient: httpClient
+        )
+
+        let user = try await client.updateUserAvatar(
+            UpdateUserAvatarRequest(id: "user-1", avatarUrl: "/api/attachments.redirect?id=abc")
+        )
+
+        XCTAssertEqual(user.avatarUrl, "/api/attachments.redirect?id=abc")
+        let sentBody = try XCTUnwrap(httpClient.lastRequest?.httpBody)
+        let sentJSON = try XCTUnwrap(String(data: sentBody, encoding: .utf8))
+        XCTAssertTrue(sentJSON.contains("\"id\":\"user-1\""))
+    }
+
+    func testUpdateUserNameSendsRequestAndDecodesResult() async throws {
+        let httpClient = MockHTTPClient()
+        httpClient.responseData = """
+        {
+            "data": {
+                "id": "user-1",
+                "name": "New Name"
+            }
+        }
+        """.data(using: .utf8)!
+
+        let client = LiveOutlineAPIClient(
+            configuration: OutlineConfiguration(baseURL: URL(string: "https://outline.example.com")!),
+            tokenStore: StaticTokenStore(),
+            httpClient: httpClient
+        )
+
+        let user = try await client.updateUserName(UpdateUserNameRequest(id: "user-1", name: "New Name"))
+
+        XCTAssertEqual(user.name, "New Name")
+        XCTAssertEqual(httpClient.lastRequest?.url?.path, "/api/users.update")
+    }
+
+    func testDeleteAttachmentSendsRequest() async throws {
+        let httpClient = MockHTTPClient()
+        httpClient.responseData = """
+        { "success": true }
+        """.data(using: .utf8)!
+
+        let client = LiveOutlineAPIClient(
+            configuration: OutlineConfiguration(baseURL: URL(string: "https://outline.example.com")!),
+            tokenStore: StaticTokenStore(),
+            httpClient: httpClient
+        )
+
+        try await client.deleteAttachment(id: "attach-1")
+
+        XCTAssertEqual(httpClient.lastRequest?.url?.path, "/api/attachments.delete")
+    }
+
+    func testCreateAttachmentDecodesUploadTargetAndFormFields() async throws {
+        let httpClient = MockHTTPClient()
+        httpClient.responseData = """
+        {
+            "data": {
+                "attachment": {
+                    "id": "attach-1",
+                    "documentId": null,
+                    "contentType": "image/jpeg",
+                    "name": "avatar.jpg",
+                    "url": "/api/attachments.redirect?id=attach-1",
+                    "size": "59304"
+                },
+                "uploadUrl": "/api/files.create",
+                "form": {
+                    "Content-Type": "image/jpeg",
+                    "key": "uploads/user-1/attach-1/avatar.jpg",
+                    "acl": "public-read"
+                }
+            }
+        }
+        """.data(using: .utf8)!
+
+        let client = LiveOutlineAPIClient(
+            configuration: OutlineConfiguration(baseURL: URL(string: "https://outline.example.com")!),
+            tokenStore: StaticTokenStore(),
+            httpClient: httpClient
+        )
+
+        let result = try await client.createAttachment(
+            CreateAttachmentRequest(name: "avatar.jpg", contentType: "image/jpeg", size: 59304)
+        )
+
+        XCTAssertEqual(result.attachment.id, "attach-1")
+        XCTAssertEqual(result.attachment.size, "59304")
+        XCTAssertEqual(result.uploadUrl, "/api/files.create")
+        XCTAssertEqual(result.form["acl"], "public-read")
+        XCTAssertEqual(httpClient.lastRequest?.url?.path, "/api/attachments.create")
+    }
+
+    func testUploadAttachmentFilePostsToTheResolvedRelativeURL() async throws {
+        let httpClient = MockHTTPClient()
+        httpClient.responseData = """
+        { "success": true }
+        """.data(using: .utf8)!
+
+        let client = LiveOutlineAPIClient(
+            configuration: OutlineConfiguration(baseURL: URL(string: "https://outline.example.com")!),
+            tokenStore: StaticTokenStore(),
+            httpClient: httpClient
+        )
+
+        let uploadTarget = CreateAttachmentResult(
+            attachment: OutlineAttachment(
+                id: "attach-1",
+                documentId: nil,
+                contentType: "image/jpeg",
+                name: "avatar.jpg",
+                url: "/api/attachments.redirect?id=attach-1",
+                size: "3"
+            ),
+            uploadUrl: "/api/files.create",
+            form: ["Content-Type": "image/jpeg", "key": "uploads/attach-1"]
+        )
+
+        try await client.uploadAttachmentFile(uploadTarget, fileData: Data("abc".utf8))
+
+        // Resolved against baseURL's host, not appended onto "/api/<baseURL-relative-path>".
+        XCTAssertEqual(httpClient.lastRequest?.url?.absoluteString, "https://outline.example.com/api/files.create")
+        XCTAssertNil(httpClient.lastRequest?.value(forHTTPHeaderField: "Authorization"))
+        let contentType = httpClient.lastRequest?.value(forHTTPHeaderField: "Content-Type")
+        XCTAssertTrue(contentType?.hasPrefix("multipart/form-data; boundary=") ?? false)
+    }
+
     func testMissingTokenThrowsTokenUnavailable() async throws {
         let httpClient = MockHTTPClient()
         let client = LiveOutlineAPIClient(

OutlineKit/Tests/OutlineKitTests/MultipartFormDataBuilderTests.swift

@@ -0,0 +1,48 @@
+import XCTest
+@testable import OutlineKit
+
+final class MultipartFormDataBuilderTests: XCTestCase {
+    func testBuildIncludesEveryFieldAndTheFile() throws {
+        let fileData = Data("fake-jpeg-bytes".utf8)
+        let (body, contentType) = MultipartFormDataBuilder.build(
+            fields: ["key": "uploads/abc", "acl": "public-read", "Content-Type": "image/jpeg"],
+            fileFieldName: "file",
+            fileName: "avatar.jpg",
+            fileData: fileData,
+            fileContentType: "image/jpeg",
+            boundary: "TestBoundary"
+        )
+
+        let bodyString = String(decoding: body, as: UTF8.self)
+
+        XCTAssertEqual(contentType, "multipart/form-data; boundary=TestBoundary")
+        XCTAssertTrue(bodyString.contains("Content-Disposition: form-data; name=\"key\""))
+        XCTAssertTrue(bodyString.contains("uploads/abc"))
+        XCTAssertTrue(bodyString.contains("Content-Disposition: form-data; name=\"acl\""))
+        XCTAssertTrue(bodyString.contains("public-read"))
+        XCTAssertTrue(bodyString.contains("Content-Disposition: form-data; name=\"file\"; filename=\"avatar.jpg\""))
+        XCTAssertTrue(bodyString.contains("fake-jpeg-bytes"))
+        XCTAssertTrue(bodyString.hasPrefix("--TestBoundary\r\n"))
+        XCTAssertTrue(bodyString.hasSuffix("--TestBoundary--\r\n"))
+    }
+
+    func testFileFieldComesAfterAllFormFields() throws {
+        let (body, _) = MultipartFormDataBuilder.build(
+            fields: ["a": "1", "b": "2"],
+            fileFieldName: "file",
+            fileName: "x.jpg",
+            fileData: Data("bytes".utf8),
+            fileContentType: "image/jpeg",
+            boundary: "B"
+        )
+        let bodyString = String(decoding: body, as: UTF8.self)
+
+        let fieldsRange = bodyString.range(of: "name=\"a\"")
+        let fileRange = bodyString.range(of: "name=\"file\"")
+        XCTAssertNotNil(fieldsRange)
+        XCTAssertNotNil(fileRange)
+        if let fieldsRange, let fileRange {
+            XCTAssertTrue(fieldsRange.lowerBound < fileRange.lowerBound)
+        }
+    }
+}

Outpost/Features/Account/AvatarCropperView.swift

@@ -0,0 +1,114 @@
+#if os(macOS)
+import AppKit
+import SwiftUI
+
+/// Crop/rotate/zoom editor shown after picking a photo, before it's
+/// uploaded — pan (drag), zoom (pinch or the slider), and 90°-increment
+/// rotate, all inside a circular mask matching how the avatar actually
+/// renders everywhere else in the app.
+///
+/// The on-screen preview and the final exported image are built from the
+/// exact same view composition (`avatarContent`), just instantiated once
+/// for display and once inside an `ImageRenderer` — that's deliberate:
+/// hand-deriving a separate set of crop-math for a higher-resolution
+/// render would risk it silently disagreeing with what the user actually
+/// saw and confirmed, and there's no way to visually verify that
+/// agreement without running the app. Reusing the identical view tree
+/// makes the export WYSIWYG by construction instead of by careful math.
+struct AvatarCropperView: View {
+    let sourceImage: NSImage
+    let onConfirm: (Data) -> Void
+    let onCancel: () -> Void
+
+    @State private var scale: CGFloat = 1
+    @State private var offset: CGSize = .zero
+    @State private var rotationDegrees: Double = 0
+    @GestureState private var dragTranslation: CGSize = .zero
+
+    /// Used for both the live preview and the exported image — see the
+    /// type-level doc comment for why that's the same size, not two.
+    private let diameter: CGFloat = 320
+
+    var body: some View {
+        VStack(spacing: 20) {
+            Text("Edit Photo")
+                .font(.headline)
+
+            ZStack {
+                avatarContent
+                    .clipShape(Circle())
+                Circle()
+                    .strokeBorder(Color.primary.opacity(0.15), lineWidth: 1)
+            }
+            .frame(width: diameter, height: diameter)
+            .contentShape(Circle())
+            .gesture(
+                DragGesture()
+                    .updating($dragTranslation) { value, state, _ in state = value.translation }
+                    .onEnded { value in
+                        offset.width += value.translation.width
+                        offset.height += value.translation.height
+                    }
+            )
+
+            HStack(spacing: 16) {
+                Button {
+                    withAnimation(.easeInOut(duration: 0.2)) { rotationDegrees -= 90 }
+                } label: {
+                    Image(systemName: "rotate.left")
+                }
+                .help("Rotate left")
+
+                Slider(value: $scale, in: 1...4)
+                    .frame(width: 140)
+
+                Button {
+                    withAnimation(.easeInOut(duration: 0.2)) { rotationDegrees += 90 }
+                } label: {
+                    Image(systemName: "rotate.right")
+                }
+                .help("Rotate right")
+            }
+
+            HStack {
+                Button("Cancel", role: .cancel, action: onCancel)
+                Spacer()
+                Button("Use Photo") {
+                    if let data = renderFinalImage() {
+                        onConfirm(data)
+                    }
+                }
+                .buttonStyle(.borderedProminent)
+            }
+        }
+        .padding(24)
+        .frame(width: 360)
+    }
+
+    /// Aspect-fills `sourceImage` into a `diameter`×`diameter` square, then
+    /// applies the user's pan/zoom/rotation on top — identical between the
+    /// live preview and the final render (see the type-level doc comment).
+    private var avatarContent: some View {
+        Image(nsImage: sourceImage)
+            .resizable()
+            .aspectRatio(contentMode: .fill)
+            .frame(width: diameter, height: diameter)
+            .scaleEffect(scale)
+            .rotationEffect(.degrees(rotationDegrees))
+            .offset(x: offset.width + dragTranslation.width, y: offset.height + dragTranslation.height)
+            .frame(width: diameter, height: diameter)
+            .clipped()
+    }
+
+    @MainActor
+    private func renderFinalImage() -> Data? {
+        let content = avatarContent
+            .clipShape(Circle())
+            .frame(width: diameter, height: diameter)
+        let renderer = ImageRenderer(content: content)
+        renderer.scale = 2 // @2x so it isn't a blurry 320px avatar on Retina displays
+        guard let nsImage = renderer.nsImage else { return nil }
+        return nsImage.jpegData(compressionQuality: 0.9)
+    }
+}
+#endif

Outpost/Features/Account/SettingsSidebarList.swift

@@ -6,6 +6,11 @@ import SwiftUI
 /// content, rather than a separate mini sidebar nested inside a page. "Done"
 /// clears `AppNavigation.isShowingSettings`, which puts the collections tree
 /// back.
+///
+/// Grouped by `SettingsCategory` — `general` (ours) sits under an "Outpost"
+/// header at the top, then Outline's own Account/Workspace/Integrations &
+/// Installation groups, matching the settings page structure of the
+/// Outline web app.
 struct SettingsSidebarList: View {
     @Binding var selection: SettingsSection?
     let onDone: () -> Void
@@ -22,9 +27,20 @@ struct SettingsSidebarList: View {
 
             Divider()
 
-            List(SettingsSection.allCases, selection: $selection) { section in
+            List(selection: $selection) {
-                Label(section.title, systemImage: section.icon)
+                ForEach(SettingsCategory.allCases) { category in
-                    .tag(section)
+                    let sections = SettingsSection.allCases.filter { $0.category == category }
+                    Section {
+                        ForEach(sections) { section in
+                            Label(section.title, systemImage: section.icon)
+                                .tag(section)
+                        }
+                    } header: {
+                        if let title = category.title {
+                            Text(title)
+                        }
+                    }
+                }
             }
             .listStyle(.sidebar)
 

Outpost/Features/Account/SettingsView.swift

@@ -1,5 +1,7 @@
 #if os(macOS)
+import AppKit
 import SwiftUI
+import UniformTypeIdentifiers
 import OutlineKit
 
 /// Settings *detail* content for one section — the section list itself now
@@ -24,6 +26,12 @@ struct SettingsView: View {
     @State private var didClearCache = false
     @State private var lastFullSyncSummary: FullSyncSummary?
     @State private var lastFlushSummary: SyncFlushSummary?
+    @State private var pickedPhoto: PickedPhoto?
+    @State private var isUploadingAvatar = false
+    @State private var avatarErrorMessage: String?
+    @State private var editableName = ""
+    @State private var isSavingName = false
+    @State private var nameErrorMessage: String?
 
     /// Full Local Sync and cache-clearing both need a real connection to be
     /// safe — clearing while offline (or letting Full Local Sync think it
@@ -62,13 +70,29 @@ struct SettingsView: View {
     private var sectionDetail: some View {
         switch section {
         case .appearance: appearanceDetail
-        case .account: accountDetail
+        case .profile: profileDetail
         case .offlineSync: offlineSyncDetail
         case .advanced: advancedDetail
         case .about: aboutDetail
+        default: comingSoonDetail
         }
     }
 
+    /// Everything in Account/Workspace/Integrations & Installation that
+    /// isn't `.profile` — real content lands section by section; this is
+    /// just the nav skeleton until then.
+    private var comingSoonDetail: some View {
+        VStack(spacing: 16) {
+            sectionHeader
+            ContentUnavailableView {
+                Label("Coming Soon", systemImage: section.icon)
+            } description: {
+                Text("\(section.title) settings aren't built yet.")
+            }
+        }
+        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
+    }
+
     private var sectionHeader: some View {
         Text(section.title)
             .font(.title.bold())
@@ -90,26 +114,121 @@ struct SettingsView: View {
         }
     }
 
-    // MARK: - Account
+    // MARK: - Profile
 
-    private var accountDetail: some View {
+    private var profileDetail: some View {
-        VStack(alignment: .leading, spacing: 16) {
+        VStack(alignment: .leading, spacing: 24) {
             sectionHeader
-            VStack(alignment: .leading, spacing: 10) {
+            avatarRow
-                labeledRow("Signed in as", session.userName ?? "—")
+            Divider().frame(maxWidth: 420)
-                if let email = session.userEmail {
+            nameRow
-                    labeledRow("Email", email)
+            Divider().frame(maxWidth: 420)
-                }
+            emailRow
-                if let teamName = session.teamName {
+            if let teamName = session.teamName {
-                    labeledRow("Workspace", teamName)
+                Divider().frame(maxWidth: 420)
-                }
+                labeledRow("Workspace", teamName)
+                    .frame(maxWidth: 420)
             }
-            .frame(maxWidth: 420)
 
             Button("Log Out…", role: .destructive) {
                 isShowingLogoutConfirmation = true
             }
         }
+        .sheet(item: $pickedPhoto) { picked in
+            AvatarCropperView(
+                sourceImage: picked.image,
+                onConfirm: { data in
+                    pickedPhoto = nil
+                    Task { await uploadAvatar(data: data) }
+                },
+                onCancel: { pickedPhoto = nil }
+            )
+        }
+        // The session only holds whatever was fetched at sign-in/launch —
+        // a name (or avatar) changed elsewhere (the Outline web app, say)
+        // never reaches it on its own. Refetching every time this page
+        // opens, rather than only once per app launch, is what makes that
+        // show up without having to quit and relaunch.
+        .task {
+            editableName = session.userName ?? ""
+            await refreshProfile()
+        }
+        .onChange(of: session.userName) { _, newValue in
+            editableName = newValue ?? ""
+        }
+    }
+
+    private var avatarRow: some View {
+        HStack(spacing: 16) {
+            AvatarBadge(avatarURL: session.userAvatarURL, size: 64, placeholderSystemImage: "person.crop.circle.fill")
+
+            VStack(alignment: .leading, spacing: 6) {
+                HStack(spacing: 10) {
+                    Button(isUploadingAvatar ? "Uploading…" : "Upload Photo…") { pickPhoto() }
+                        .disabled(isUploadingAvatar)
+                    if session.userAvatarURL != nil {
+                        Button("Remove", role: .destructive) { Task { await removeAvatar() } }
+                            .buttonStyle(.plain)
+                            .foregroundStyle(.red)
+                            .disabled(isUploadingAvatar)
+                    }
+                    if isUploadingAvatar {
+                        ProgressView().controlSize(.small)
+                    }
+                }
+                if let avatarErrorMessage {
+                    Text(avatarErrorMessage)
+                        .font(.caption)
+                        .foregroundStyle(.red)
+                }
+            }
+        }
+    }
+
+    private var nameRow: some View {
+        VStack(alignment: .leading, spacing: 6) {
+            Text("Name")
+                .font(.caption)
+                .foregroundStyle(.secondary)
+            HStack(spacing: 10) {
+                TextField("Name", text: $editableName)
+                    .textFieldStyle(.roundedBorder)
+                    .frame(maxWidth: 280)
+                    .onSubmit { Task { await saveName() } }
+                if editableName != (session.userName ?? "") && !editableName.trimmingCharacters(in: .whitespaces).isEmpty {
+                    if isSavingName {
+                        ProgressView().controlSize(.small)
+                    } else {
+                        Button("Save") { Task { await saveName() } }
+                            .controlSize(.small)
+                    }
+                }
+            }
+            if let nameErrorMessage {
+                Text(nameErrorMessage)
+                    .font(.caption)
+                    .foregroundStyle(.red)
+            }
+        }
+        .frame(maxWidth: 420, alignment: .leading)
+    }
+
+    private var emailRow: some View {
+        VStack(alignment: .leading, spacing: 6) {
+            labeledRow("Email", session.userEmail ?? "—")
+            HStack(spacing: 4) {
+                Text("Email is tied to sign-in, so it can't be changed here — use")
+                if let serverURL = session.serverURL {
+                    Link("Outline on the web", destination: serverURL)
+                } else {
+                    Text("Outline on the web")
+                }
+                Text("instead.")
+            }
+            .font(.caption)
+            .foregroundStyle(.secondary)
+        }
+        .frame(maxWidth: 420, alignment: .leading)
     }
 
     // MARK: - Offline & Sync
@@ -416,5 +535,97 @@ struct SettingsView: View {
             didClearCache = false
         }
     }
+
+    // MARK: - Profile actions
+
+    private func refreshProfile() async {
+        guard let apiClient = session.apiClient else { return }
+        guard let fresh = try? await apiClient.currentUser() else { return }
+        session.applyUpdatedProfile(fresh)
+    }
+
+    private func pickPhoto() {
+        let panel = NSOpenPanel()
+        panel.allowedContentTypes = [.png, .jpeg, .heic, .image]
+        panel.allowsMultipleSelection = false
+        panel.canChooseDirectories = false
+        panel.canChooseFiles = true
+        guard panel.runModal() == .OK, let url = panel.url, let image = NSImage(contentsOf: url) else { return }
+        pickedPhoto = PickedPhoto(image: image)
+    }
+
+    private func uploadAvatar(data: Data) async {
+        guard let apiClient = session.apiClient, let userId = session.userId else { return }
+        isUploadingAvatar = true
+        defer { isUploadingAvatar = false }
+        let previousAttachmentId = attachmentId(from: session.userAvatarURL)
+        do {
+            let target = try await apiClient.createAttachment(
+                CreateAttachmentRequest(name: "avatar.jpg", contentType: "image/jpeg", size: data.count)
+            )
+            try await apiClient.uploadAttachmentFile(target, fileData: data)
+            let updated = try await apiClient.updateUserAvatar(
+                UpdateUserAvatarRequest(id: userId, avatarUrl: target.attachment.url)
+            )
+            session.applyUpdatedProfile(updated)
+            avatarErrorMessage = nil
+            // Best-effort — the new avatar is already live either way, this
+            // just stops the old upload from sitting around unreferenced.
+            if let previousAttachmentId {
+                try? await apiClient.deleteAttachment(id: previousAttachmentId)
+            }
+        } catch {
+            avatarErrorMessage = outlineErrorMessage(error, fallback: "Couldn't upload this photo.")
+        }
+    }
+
+    private func removeAvatar() async {
+        guard let apiClient = session.apiClient, let userId = session.userId else { return }
+        isUploadingAvatar = true
+        defer { isUploadingAvatar = false }
+        let previousAttachmentId = attachmentId(from: session.userAvatarURL)
+        do {
+            let updated = try await apiClient.updateUserAvatar(UpdateUserAvatarRequest(id: userId, avatarUrl: nil))
+            session.applyUpdatedProfile(updated)
+            avatarErrorMessage = nil
+            if let previousAttachmentId {
+                try? await apiClient.deleteAttachment(id: previousAttachmentId)
+            }
+        } catch {
+            avatarErrorMessage = outlineErrorMessage(error, fallback: "Couldn't remove this photo.")
+        }
+    }
+
+    /// The avatar URL is `/api/attachments.redirect?id=<attachment-id>` —
+    /// pulling the id back out of it is how the previous attachment gets
+    /// found for cleanup, since nothing else keeps a record of it.
+    private func attachmentId(from avatarURL: URL?) -> String? {
+        guard let avatarURL, let components = URLComponents(url: avatarURL, resolvingAgainstBaseURL: false) else {
+            return nil
+        }
+        return components.queryItems?.first(where: { $0.name == "id" })?.value
+    }
+
+    private func saveName() async {
+        let trimmed = editableName.trimmingCharacters(in: .whitespacesAndNewlines)
+        guard !trimmed.isEmpty, trimmed != (session.userName ?? ""), let apiClient = session.apiClient, let userId = session.userId else { return }
+        isSavingName = true
+        defer { isSavingName = false }
+        do {
+            let updated = try await apiClient.updateUserName(UpdateUserNameRequest(id: userId, name: trimmed))
+            session.applyUpdatedProfile(updated)
+            editableName = updated.name
+            nameErrorMessage = nil
+        } catch {
+            nameErrorMessage = outlineErrorMessage(error, fallback: "Couldn't update your name.")
+        }
+    }
+}
+
+/// Wraps a picked `NSImage` so it can drive `.sheet(item:)` — `NSImage`
+/// itself isn't `Identifiable`.
+private struct PickedPhoto: Identifiable {
+    let id = UUID()
+    let image: NSImage
 }
 #endif

Outpost/Root/AppNavigation.swift

@@ -1,27 +1,131 @@
 import Observation
 
-enum SettingsSection: String, CaseIterable, Identifiable, Hashable {
+/// Top-level groupings shown as section headers in `SettingsSidebarList`.
-    case appearance, account, offlineSync, advanced, about
+/// `general` holds everything that's ours, not Outline's own settings
+/// categories — labeled "Outpost" so it reads as clearly distinct from the
+/// Outline-sourced groups below it.
+enum SettingsCategory: String, CaseIterable, Identifiable {
+    case general
+    case account
+    case workspace
+    case integrationsInstallation
 
     var id: String { rawValue }
 
+    var title: String? {
+        switch self {
+        case .general: return "Outpost"
+        case .account: return "Account"
+        case .workspace: return "Workspace"
+        case .integrationsInstallation: return "Integrations & Installation"
+        }
+    }
+}
+
+/// One entry in the Settings sidebar. Mirrors Outline's own settings
+/// categories (Account/Workspace/Integrations & Installation) so this app's
+/// settings read as a native counterpart to the web app's, plus a `general`
+/// group for things that are ours and don't map onto Outline's structure
+/// (offline/sync, advanced, about, appearance).
+///
+/// Most of the Account/Workspace/Integrations cases are navigation-only for
+/// now — `SettingsView` renders a "Coming Soon" placeholder for anything not
+/// explicitly built yet. Content lands section by section.
+enum SettingsSection: String, CaseIterable, Identifiable, Hashable {
+    // General (ours)
+    case appearance, offlineSync, advanced, about
+
+    // Account
+    case profile, preferences, notifications, passkeys, apiAccess
+
+    // Workspace
+    case details, authentication, security, ai, members, groups, templates, emojis, applications, shared, links, webhooks, importData, exportData
+
+    // Integrations & Installation
+    case installation
+
+    var id: String { rawValue }
+
+    var category: SettingsCategory {
+        switch self {
+        case .appearance, .offlineSync, .advanced, .about:
+            return .general
+        case .profile, .preferences, .notifications, .passkeys, .apiAccess:
+            return .account
+        case .details, .authentication, .security, .ai, .members, .groups, .templates, .emojis, .applications, .shared, .links, .webhooks, .importData, .exportData:
+            return .workspace
+        case .installation:
+            return .integrationsInstallation
+        }
+    }
+
     var title: String {
         switch self {
         case .appearance: return "Appearance"
-        case .account: return "Account"
         case .offlineSync: return "Offline & Sync"
         case .advanced: return "Advanced"
         case .about: return "About"
+        case .profile: return "Profile"
+        case .preferences: return "Preferences"
+        case .notifications: return "Notifications"
+        case .passkeys: return "Passkeys"
+        case .apiAccess: return "API & Access"
+        case .details: return "Details"
+        case .authentication: return "Authentication"
+        case .security: return "Security"
+        case .ai: return "AI"
+        case .members: return "Members"
+        case .groups: return "Groups"
+        case .templates: return "Templates"
+        case .emojis: return "Emojis"
+        case .applications: return "Applications"
+        case .shared: return "Shared"
+        case .links: return "Links"
+        case .webhooks: return "Webhooks"
+        case .importData: return "Import"
+        case .exportData: return "Export"
+        case .installation: return "Installation"
         }
     }
 
     var icon: String {
         switch self {
         case .appearance: return "paintbrush"
-        case .account: return "person.crop.circle"
         case .offlineSync: return "arrow.triangle.2.circlepath"
         case .advanced: return "wrench.and.screwdriver"
         case .about: return "info.circle"
+        case .profile: return "person.crop.circle"
+        case .preferences: return "gearshape"
+        case .notifications: return "bell"
+        case .passkeys: return "key"
+        case .apiAccess: return "chevron.left.forwardslash.chevron.right"
+        case .details: return "building.2"
+        case .authentication: return "lock"
+        case .security: return "shield"
+        case .ai: return "sparkles"
+        case .members: return "person.2"
+        case .groups: return "person.3"
+        case .templates: return "doc.on.doc"
+        case .emojis: return "face.smiling"
+        case .applications: return "app.badge"
+        case .shared: return "square.and.arrow.up.on.square"
+        case .links: return "link"
+        case .webhooks: return "bolt.horizontal"
+        case .importData: return "square.and.arrow.down"
+        case .exportData: return "square.and.arrow.up"
+        case .installation: return "shippingbox"
+        }
+    }
+
+    /// Everything actually built so far — everything else in Account/
+    /// Workspace/Integrations & Installation renders a "Coming Soon"
+    /// placeholder until its content is specified and built.
+    var isImplemented: Bool {
+        switch self {
+        case .appearance, .offlineSync, .advanced, .about, .profile:
+            return true
+        default:
+            return false
         }
     }
 }

Outpost/Root/SessionStore.swift

@@ -11,6 +11,7 @@ final class SessionStore {
     private let defaults: UserDefaults
 
     var isSignedIn: Bool
+    private(set) var userId: String?
     var userName: String?
     var userEmail: String?
     var userAvatarURL: URL?
@@ -68,6 +69,7 @@ final class SessionStore {
         try? tokenStore.clear()
         defaults.removeObject(forKey: Self.serverURLDefaultsKey)
         isSignedIn = false
+        userId = nil
         userName = nil
         userEmail = nil
         userAvatarURL = nil
@@ -85,7 +87,18 @@ final class SessionStore {
         apply(user: auth.user, team: auth.team, serverURL: serverURL)
     }
 
+    /// Settings calls this after a successful name/avatar change so the
+    /// sidebar's account footer and everywhere else reading these reflect
+    /// it immediately, without waiting for the next `auth.info` refresh.
+    func applyUpdatedProfile(_ user: OutlineUser) {
+        guard let serverURL else { return }
+        userId = user.id
+        userName = user.name
+        userAvatarURL = user.avatarUrl.flatMap { URL(string: $0, relativeTo: serverURL)?.absoluteURL }
+    }
+
     private func apply(user: OutlineUser, team: OutlineTeam, serverURL: URL) {
+        userId = user.id
         userName = user.name
         userEmail = user.email
         // Outline can return either an absolute URL or a server-relative path

Outpost/Support/AvatarBadge.swift

@@ -1,4 +1,5 @@
 import SwiftUI
+import OutlineKit
 
 #if os(macOS)
 import AppKit
@@ -41,11 +42,46 @@ struct AvatarBadge: View {
         .task(id: avatarURL) {
             loadedImage = nil
             guard let avatarURL else { return }
-            guard let (data, _) = try? await URLSession.shared.data(from: avatarURL) else { return }
+            loadedImage = await Self.loadImage(from: avatarURL)
-            loadedImage = PlatformImage(data: data)
         }
     }
 
+    /// The real fix, confirmed against a live network capture: every other
+    /// request this app makes attaches `Authorization: Bearer <token>` —
+    /// this one never did, sending a bare unauthenticated GET. Outline's
+    /// browser session authenticates `attachments.redirect` via cookies
+    /// instead, which a native app doesn't have; the API-token equivalent
+    /// is the same Bearer header every RPC call already uses. Almost
+    /// certainly means no avatar image (not just a freshly-uploaded one)
+    /// has ever actually loaded in this app — a 401 and a "no avatar set"
+    /// look identical here, both just fall back to the placeholder icon
+    /// with nothing on screen to flag it as an error.
+    ///
+    /// The retry loop is a secondary, independent hardening — cheap
+    /// insurance against a self-hosted reverse-proxied storage backend not
+    /// being instantly consistent right after an upload — kept alongside
+    /// the auth fix rather than instead of it.
+    private static func loadImage(from url: URL) async -> PlatformImage? {
+        var request = URLRequest(url: url)
+        request.cachePolicy = .reloadIgnoringLocalCacheData
+        if let token = try? KeychainTokenStore().token() {
+            request.setValue("Bearer \(token)", forHTTPHeaderField: "Authorization")
+        }
+
+        for attempt in 0..<3 {
+            if attempt > 0 {
+                try? await Task.sleep(for: .milliseconds(400))
+            }
+            if let (data, response) = try? await URLSession.shared.data(for: request),
+               let httpResponse = response as? HTTPURLResponse,
+               (200...299).contains(httpResponse.statusCode),
+               let image = PlatformImage(data: data) {
+                return image
+            }
+        }
+        return nil
+    }
+
     private func platformImage(_ image: PlatformImage) -> Image {
         #if os(macOS)
         Image(nsImage: image)

Outpost/Support/NSImage+JPEGData.swift

@@ -0,0 +1,14 @@
+#if os(macOS)
+import AppKit
+
+extension NSImage {
+    /// `NSImage` has no built-in JPEG encoder (unlike `UIImage`) — routes
+    /// through a bitmap representation to get one.
+    func jpegData(compressionQuality: CGFloat) -> Data? {
+        guard let tiffData = tiffRepresentation, let bitmap = NSBitmapImageRep(data: tiffData) else {
+            return nil
+        }
+        return bitmap.representation(using: .jpeg, properties: [.compressionFactor: compressionQuality])
+    }
+}
+#endif