first commit

src/models/types.ts

@@ -0,0 +1,109 @@
+/** Unified contact model used for sync between Outlook and Starface */
+export interface UnifiedContact {
+  id?: string;
+  outlookId?: string;
+  starfaceId?: string;
+  firstName: string;
+  lastName: string;
+  company: string;
+  jobTitle: string;
+  email: string;
+  emailSecondary: string;
+  phoneWork: string;
+  phoneMobile: string;
+  phoneHome: string;
+  fax: string;
+  street: string;
+  city: string;
+  postalCode: string;
+  state: string;
+  country: string;
+  website: string;
+  notes: string;
+  salutation: string;
+  title: string;
+  birthday: string;
+  lastModified?: string;
+}
+
+export function emptyContact(): UnifiedContact {
+  return {
+    firstName: "",
+    lastName: "",
+    company: "",
+    jobTitle: "",
+    email: "",
+    emailSecondary: "",
+    phoneWork: "",
+    phoneMobile: "",
+    phoneHome: "",
+    fax: "",
+    street: "",
+    city: "",
+    postalCode: "",
+    state: "",
+    country: "",
+    website: "",
+    notes: "",
+    salutation: "",
+    title: "",
+    birthday: "",
+  };
+}
+
+/** Starface connection settings */
+export interface StarfaceConnection {
+  host: string;
+  port: number;
+  useSsl: boolean;
+  loginId: string;
+  password: string;
+}
+
+/** A Starface address book (represented by userId scope or tag) */
+export interface StarfaceAddressBook {
+  type: "central" | "user" | "tag";
+  userId?: string;
+  tagId?: string;
+  name: string;
+}
+
+/** An Outlook contact folder */
+export interface OutlookContactFolder {
+  id: string;
+  displayName: string;
+  parentFolderId?: string;
+}
+
+/** A sync profile mapping one Outlook folder to one Starface address book */
+export interface SyncProfile {
+  id: string;
+  name: string;
+  starfaceConnection: StarfaceConnection;
+  starfaceAddressBook: StarfaceAddressBook;
+  outlookFolderId: string;
+  outlookFolderName: string;
+  syncDirection: "both" | "outlook-to-starface" | "starface-to-outlook";
+  lastSync?: string;
+  enabled: boolean;
+}
+
+/** Tracks which contacts have been synced to detect changes */
+export interface SyncMapping {
+  profileId: string;
+  outlookId: string;
+  starfaceId: string;
+  lastSyncHash: string;
+}
+
+/** Result of a sync operation */
+export interface SyncResult {
+  profileId: string;
+  profileName: string;
+  timestamp: string;
+  created: number;
+  updated: number;
+  deleted: number;
+  errors: string[];
+  direction: string;
+}

src/services/outlook-contacts.ts

@@ -0,0 +1,246 @@
+import { UnifiedContact, OutlookContactFolder, emptyContact } from "../models/types";
+
+/**
+ * Outlook contacts service using Office.js REST API and EWS.
+ * Works in both classic and new Outlook via Office.js mailbox REST API.
+ */
+export class OutlookContactsService {
+  private accessToken: string | null = null;
+
+  /** Get REST API access token from Office.js */
+  async getAccessToken(): Promise<string> {
+    return new Promise((resolve, reject) => {
+      if (typeof Office === "undefined" || !Office.context?.mailbox) {
+        reject(new Error("Office.js nicht verfügbar"));
+        return;
+      }
+
+      Office.context.mailbox.getCallbackTokenAsync(
+        { isRest: true },
+        (result) => {
+          if (result.status === Office.AsyncResultStatus.Succeeded) {
+            this.accessToken = result.value;
+            resolve(result.value);
+          } else {
+            reject(new Error(result.error?.message || "Token-Fehler"));
+          }
+        }
+      );
+    });
+  }
+
+  private getRestUrl(): string {
+    if (!Office.context?.mailbox?.restUrl) {
+      return "https://outlook.office.com/api/v2.0";
+    }
+    return Office.context.mailbox.restUrl + "/v2.0";
+  }
+
+  private async fetchApi(endpoint: string, options: RequestInit = {}): Promise<Response> {
+    if (!this.accessToken) {
+      await this.getAccessToken();
+    }
+
+    const url = `${this.getRestUrl()}${endpoint}`;
+    return fetch(url, {
+      ...options,
+      headers: {
+        Authorization: `Bearer ${this.accessToken}`,
+        "Content-Type": "application/json",
+        ...((options.headers as Record<string, string>) || {}),
+      },
+    });
+  }
+
+  async getContactFolders(): Promise<OutlookContactFolder[]> {
+    try {
+      const resp = await this.fetchApi("/me/contactfolders");
+      if (!resp.ok) {
+        console.error("Failed to get contact folders:", resp.status);
+        return [];
+      }
+      const data = await resp.json();
+      const folders: OutlookContactFolder[] = [
+        { id: "default", displayName: "Kontakte (Standard)" },
+      ];
+
+      for (const f of data.value || []) {
+        folders.push({
+          id: f.Id,
+          displayName: f.DisplayName,
+          parentFolderId: f.ParentFolderId,
+        });
+      }
+
+      return folders;
+    } catch (err) {
+      console.error("Error getting contact folders:", err);
+      return [{ id: "default", displayName: "Kontakte (Standard)" }];
+    }
+  }
+
+  async getContacts(folderId: string): Promise<UnifiedContact[]> {
+    const allContacts: UnifiedContact[] = [];
+    let nextLink: string | null = null;
+    const pageSize = 100;
+
+    const basePath =
+      folderId === "default"
+        ? `/me/contacts?$top=${pageSize}`
+        : `/me/contactfolders/${folderId}/contacts?$top=${pageSize}`;
+
+    let endpoint = basePath;
+
+    do {
+      const resp = await this.fetchApi(endpoint);
+      if (!resp.ok) break;
+
+      const data = await resp.json();
+      for (const c of data.value || []) {
+        allContacts.push(this.mapFromOutlook(c));
+      }
+
+      nextLink = data["@odata.nextLink"] || null;
+      if (nextLink) {
+        // Extract relative path from full URL
+        const restUrl = this.getRestUrl();
+        endpoint = nextLink.replace(restUrl, "");
+      }
+    } while (nextLink);
+
+    return allContacts;
+  }
+
+  async createContact(
+    contact: UnifiedContact,
+    folderId: string
+  ): Promise<UnifiedContact | null> {
+    const outlookContact = this.mapToOutlook(contact);
+    const endpoint =
+      folderId === "default"
+        ? "/me/contacts"
+        : `/me/contactfolders/${folderId}/contacts`;
+
+    const resp = await this.fetchApi(endpoint, {
+      method: "POST",
+      body: JSON.stringify(outlookContact),
+    });
+
+    if (!resp.ok) return null;
+    const created = await resp.json();
+    return this.mapFromOutlook(created);
+  }
+
+  async updateContact(
+    outlookId: string,
+    contact: UnifiedContact
+  ): Promise<boolean> {
+    const outlookContact = this.mapToOutlook(contact);
+    const resp = await this.fetchApi(`/me/contacts/${outlookId}`, {
+      method: "PATCH",
+      body: JSON.stringify(outlookContact),
+    });
+    return resp.ok;
+  }
+
+  async deleteContact(outlookId: string): Promise<boolean> {
+    const resp = await this.fetchApi(`/me/contacts/${outlookId}`, {
+      method: "DELETE",
+    });
+    return resp.ok;
+  }
+
+  private mapFromOutlook(c: Record<string, unknown>): UnifiedContact {
+    const contact = emptyContact();
+    contact.outlookId = (c.Id as string) || "";
+    contact.firstName = (c.GivenName as string) || "";
+    contact.lastName = (c.Surname as string) || "";
+    contact.company = (c.CompanyName as string) || "";
+    contact.jobTitle = (c.JobTitle as string) || "";
+    contact.salutation = (c.Title as string) || "";
+
+    const emails = (c.EmailAddresses as Array<{ Address: string }>) || [];
+    contact.email = emails[0]?.Address || "";
+    contact.emailSecondary = emails[1]?.Address || "";
+
+    const phones = (c.Phones as Array<{ Type: string; Number: string }>) || [];
+    for (const p of phones) {
+      switch (p.Type) {
+        case "Business":
+          contact.phoneWork = p.Number || "";
+          break;
+        case "Mobile":
+          contact.phoneMobile = p.Number || "";
+          break;
+        case "Home":
+          contact.phoneHome = p.Number || "";
+          break;
+        case "BusinessFax":
+          contact.fax = p.Number || "";
+          break;
+      }
+    }
+
+    const addr = (c.BusinessAddress || c.HomeAddress || {}) as Record<string, string>;
+    contact.street = addr.Street || "";
+    contact.city = addr.City || "";
+    contact.postalCode = addr.PostalCode || "";
+    contact.state = addr.State || "";
+    contact.country = addr.CountryOrRegion || "";
+
+    const websites = (c.Websites as Array<{ Address: string }>) || [];
+    contact.website = websites[0]?.Address || "";
+    contact.notes = (c.PersonalNotes as string) || "";
+    contact.birthday = (c.Birthday as string) || "";
+    contact.lastModified = (c.LastModifiedDateTime as string) || "";
+
+    return contact;
+  }
+
+  private mapToOutlook(contact: UnifiedContact): Record<string, unknown> {
+    const c: Record<string, unknown> = {
+      GivenName: contact.firstName,
+      Surname: contact.lastName,
+      CompanyName: contact.company,
+      JobTitle: contact.jobTitle,
+      Title: contact.salutation,
+      PersonalNotes: contact.notes,
+    };
+
+    const emails = [];
+    if (contact.email) {
+      emails.push({ Address: contact.email, Name: contact.email });
+    }
+    if (contact.emailSecondary) {
+      emails.push({ Address: contact.emailSecondary, Name: contact.emailSecondary });
+    }
+    if (emails.length > 0) c.EmailAddresses = emails;
+
+    const phones = [];
+    if (contact.phoneWork) phones.push({ Type: "Business", Number: contact.phoneWork });
+    if (contact.phoneMobile) phones.push({ Type: "Mobile", Number: contact.phoneMobile });
+    if (contact.phoneHome) phones.push({ Type: "Home", Number: contact.phoneHome });
+    if (contact.fax) phones.push({ Type: "BusinessFax", Number: contact.fax });
+    if (phones.length > 0) c.Phones = phones;
+
+    if (contact.street || contact.city || contact.postalCode) {
+      c.BusinessAddress = {
+        Street: contact.street,
+        City: contact.city,
+        PostalCode: contact.postalCode,
+        State: contact.state,
+        CountryOrRegion: contact.country,
+      };
+    }
+
+    if (contact.website) {
+      c.Websites = [{ Type: "Work", Address: contact.website, Name: contact.website }];
+    }
+
+    if (contact.birthday) {
+      c.Birthday = contact.birthday;
+    }
+
+    return c;
+  }
+}

src/services/profile-manager.ts

@@ -0,0 +1,88 @@
+import { SyncProfile, SyncMapping } from "../models/types";
+
+const PROFILES_KEY = "starface-sync-profiles";
+const MAPPINGS_KEY_PREFIX = "starface-sync-mappings-";
+
+export class ProfileManager {
+  getProfiles(): SyncProfile[] {
+    try {
+      const data = localStorage.getItem(PROFILES_KEY);
+      return data ? JSON.parse(data) : [];
+    } catch {
+      return [];
+    }
+  }
+
+  saveProfiles(profiles: SyncProfile[]): void {
+    localStorage.setItem(PROFILES_KEY, JSON.stringify(profiles));
+  }
+
+  getProfile(id: string): SyncProfile | null {
+    return this.getProfiles().find((p) => p.id === id) || null;
+  }
+
+  addProfile(profile: SyncProfile): void {
+    const profiles = this.getProfiles();
+    profiles.push(profile);
+    this.saveProfiles(profiles);
+  }
+
+  updateProfile(profile: SyncProfile): void {
+    const profiles = this.getProfiles();
+    const index = profiles.findIndex((p) => p.id === profile.id);
+    if (index >= 0) {
+      profiles[index] = profile;
+      this.saveProfiles(profiles);
+    }
+  }
+
+  deleteProfile(id: string): void {
+    const profiles = this.getProfiles().filter((p) => p.id !== id);
+    this.saveProfiles(profiles);
+    localStorage.removeItem(MAPPINGS_KEY_PREFIX + id);
+  }
+
+  updateLastSync(profileId: string): void {
+    const profiles = this.getProfiles();
+    const profile = profiles.find((p) => p.id === profileId);
+    if (profile) {
+      profile.lastSync = new Date().toISOString();
+      this.saveProfiles(profiles);
+    }
+  }
+
+  getSyncMappings(profileId: string): SyncMapping[] {
+    try {
+      const data = localStorage.getItem(MAPPINGS_KEY_PREFIX + profileId);
+      return data ? JSON.parse(data) : [];
+    } catch {
+      return [];
+    }
+  }
+
+  saveSyncMappings(profileId: string, mappings: SyncMapping[]): void {
+    localStorage.setItem(
+      MAPPINGS_KEY_PREFIX + profileId,
+      JSON.stringify(mappings)
+    );
+  }
+
+  addSyncMapping(mapping: SyncMapping): void {
+    const mappings = this.getSyncMappings(mapping.profileId);
+    const existing = mappings.findIndex(
+      (m) =>
+        m.outlookId === mapping.outlookId ||
+        m.starfaceId === mapping.starfaceId
+    );
+    if (existing >= 0) {
+      mappings[existing] = mapping;
+    } else {
+      mappings.push(mapping);
+    }
+    this.saveSyncMappings(mapping.profileId, mappings);
+  }
+
+  generateId(): string {
+    return Date.now().toString(36) + Math.random().toString(36).substring(2, 9);
+  }
+}

src/services/starface-api.ts

@@ -0,0 +1,358 @@
+import {
+  StarfaceConnection,
+  StarfaceAddressBook,
+  UnifiedContact,
+  emptyContact,
+} from "../models/types";
+
+interface LoginResponse {
+  loginType: string;
+  nonce: string;
+  secret: string | null;
+}
+
+interface StarfaceContactAttribute {
+  displayKey: string;
+  name: string;
+  value: string;
+  i18nDisplayName?: string;
+  additionalValues?: Record<string, string>;
+}
+
+interface StarfaceContactBlock {
+  name: string;
+  resourceKey: string;
+  attributes: StarfaceContactAttribute[];
+}
+
+interface StarfaceContact {
+  id: string;
+  blocks: StarfaceContactBlock[];
+}
+
+interface StarfaceTag {
+  id: string;
+  name: string;
+}
+
+async function sha512(input: string): Promise<string> {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(input);
+  const hashBuffer = await crypto.subtle.digest("SHA-512", data);
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+  return hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");
+}
+
+export class StarfaceApiClient {
+  private baseUrl: string;
+  private token: string | null = null;
+  private connection: StarfaceConnection;
+
+  constructor(connection: StarfaceConnection) {
+    this.connection = connection;
+    const protocol = connection.useSsl ? "https" : "http";
+    const portPart =
+      (connection.useSsl && connection.port === 443) ||
+      (!connection.useSsl && connection.port === 80)
+        ? ""
+        : `:${connection.port}`;
+    this.baseUrl = `${protocol}://${connection.host}${portPart}/rest`;
+  }
+
+  private headers(withAuth = true): Record<string, string> {
+    const h: Record<string, string> = {
+      "Content-Type": "application/json",
+      "X-Version": "2",
+    };
+    if (withAuth && this.token) {
+      h["authToken"] = this.token;
+    }
+    return h;
+  }
+
+  async login(): Promise<boolean> {
+    try {
+      // Step 1: get nonce
+      const nonceResp = await fetch(`${this.baseUrl}/login`, {
+        method: "GET",
+        headers: this.headers(false),
+      });
+      if (!nonceResp.ok) throw new Error(`Login GET failed: ${nonceResp.status}`);
+      const loginData: LoginResponse = await nonceResp.json();
+
+      // Step 2: calculate secret
+      const { loginId, password } = this.connection;
+      const passwordHash = await sha512(password);
+      const combined = loginId + loginData.nonce + passwordHash;
+      const combinedHash = await sha512(combined);
+      const secret = `${loginId}:${combinedHash}`;
+
+      // Step 3: post login
+      const loginResp = await fetch(`${this.baseUrl}/login`, {
+        method: "POST",
+        headers: this.headers(false),
+        body: JSON.stringify({
+          loginType: loginData.loginType,
+          nonce: loginData.nonce,
+          secret,
+        }),
+      });
+      if (!loginResp.ok) throw new Error(`Login POST failed: ${loginResp.status}`);
+      const tokenData = await loginResp.json();
+      this.token = tokenData.token;
+      return true;
+    } catch (err) {
+      console.error("Starface login failed:", err);
+      return false;
+    }
+  }
+
+  async logout(): Promise<void> {
+    if (!this.token) return;
+    try {
+      await fetch(`${this.baseUrl}/login`, {
+        method: "DELETE",
+        headers: this.headers(),
+      });
+    } finally {
+      this.token = null;
+    }
+  }
+
+  async getCurrentUserId(): Promise<string | null> {
+    try {
+      const resp = await fetch(`${this.baseUrl}/users/me`, {
+        headers: this.headers(),
+      });
+      if (!resp.ok) return null;
+      const user = await resp.json();
+      return user.id || null;
+    } catch {
+      return null;
+    }
+  }
+
+  async getTags(): Promise<StarfaceTag[]> {
+    try {
+      const resp = await fetch(`${this.baseUrl}/contacts/tags`, {
+        headers: this.headers(),
+      });
+      if (!resp.ok) return [];
+      return await resp.json();
+    } catch {
+      return [];
+    }
+  }
+
+  async getAvailableAddressBooks(): Promise<StarfaceAddressBook[]> {
+    const books: StarfaceAddressBook[] = [];
+
+    // Central address book
+    books.push({
+      type: "central",
+      name: "Zentrales Adressbuch",
+    });
+
+    // Current user's private address book
+    const userId = await this.getCurrentUserId();
+    if (userId) {
+      books.push({
+        type: "user",
+        userId,
+        name: "Persönliches Adressbuch",
+      });
+    }
+
+    // Tags as virtual address books
+    const tags = await this.getTags();
+    for (const tag of tags) {
+      books.push({
+        type: "tag",
+        tagId: tag.id,
+        name: `Tag: ${tag.name}`,
+      });
+    }
+
+    return books;
+  }
+
+  async getContacts(
+    addressBook: StarfaceAddressBook,
+    page = 0,
+    pageSize = 200
+  ): Promise<UnifiedContact[]> {
+    const params = new URLSearchParams({
+      page: page.toString(),
+      pagesize: pageSize.toString(),
+    });
+
+    if (addressBook.type === "user" && addressBook.userId) {
+      params.set("userId", addressBook.userId);
+    }
+    if (addressBook.type === "tag" && addressBook.tagId) {
+      params.set("tags", addressBook.tagId);
+    }
+
+    const allContacts: UnifiedContact[] = [];
+    let currentPage = page;
+    let hasMore = true;
+
+    while (hasMore) {
+      params.set("page", currentPage.toString());
+      const resp = await fetch(`${this.baseUrl}/contacts?${params}`, {
+        headers: this.headers(),
+      });
+      if (!resp.ok) break;
+
+      const contacts: StarfaceContact[] = await resp.json();
+      if (contacts.length === 0) {
+        hasMore = false;
+        break;
+      }
+
+      for (const sc of contacts) {
+        allContacts.push(this.mapFromStarface(sc));
+      }
+
+      if (contacts.length < pageSize) {
+        hasMore = false;
+      } else {
+        currentPage++;
+      }
+    }
+
+    return allContacts;
+  }
+
+  async createContact(
+    contact: UnifiedContact,
+    addressBook: StarfaceAddressBook
+  ): Promise<UnifiedContact | null> {
+    const starfaceContact = this.mapToStarface(contact, addressBook);
+    const params = new URLSearchParams();
+    if (addressBook.type === "user" && addressBook.userId) {
+      params.set("userId", addressBook.userId);
+    }
+
+    const url = `${this.baseUrl}/contacts${params.toString() ? "?" + params : ""}`;
+    const resp = await fetch(url, {
+      method: "POST",
+      headers: this.headers(),
+      body: JSON.stringify(starfaceContact),
+    });
+    if (!resp.ok) return null;
+    const created: StarfaceContact = await resp.json();
+    return this.mapFromStarface(created);
+  }
+
+  async updateContact(
+    contactId: string,
+    contact: UnifiedContact,
+    addressBook: StarfaceAddressBook
+  ): Promise<boolean> {
+    const starfaceContact = this.mapToStarface(contact, addressBook);
+    starfaceContact.id = contactId;
+    const params = new URLSearchParams();
+    if (addressBook.type === "user" && addressBook.userId) {
+      params.set("userId", addressBook.userId);
+    }
+
+    const url = `${this.baseUrl}/contacts/${contactId}${params.toString() ? "?" + params : ""}`;
+    const resp = await fetch(url, {
+      method: "PUT",
+      headers: this.headers(),
+      body: JSON.stringify(starfaceContact),
+    });
+    return resp.ok;
+  }
+
+  async deleteContact(contactId: string): Promise<boolean> {
+    const resp = await fetch(`${this.baseUrl}/contacts/${contactId}`, {
+      method: "DELETE",
+      headers: this.headers(),
+    });
+    return resp.ok;
+  }
+
+  private mapFromStarface(sc: StarfaceContact): UnifiedContact {
+    const contact = emptyContact();
+    contact.starfaceId = sc.id;
+
+    const attrs: Record<string, string> = {};
+    for (const block of sc.blocks || []) {
+      for (const attr of block.attributes || []) {
+        if (attr.value) {
+          attrs[attr.displayKey] = attr.value;
+        }
+      }
+    }
+
+    contact.firstName = attrs["NAME"] || "";
+    contact.lastName = attrs["SURNAME"] || "";
+    contact.company = attrs["COMPANY"] || "";
+    contact.jobTitle = attrs["JOB_TITLE"] || "";
+    contact.email = attrs["EMAIL"] || "";
+    contact.phoneWork = attrs["OFFICE_PHONE_NUMBER"] || "";
+    contact.phoneMobile = attrs["MOBILE_PHONE_NUMBER"] || "";
+    contact.phoneHome = attrs["PRIVATE_PHONE_NUMBER"] || "";
+    contact.fax = attrs["FAX_NUMBER"] || "";
+    contact.street = attrs["STREET"] || "";
+    contact.city = attrs["CITY"] || "";
+    contact.postalCode = attrs["POSTAL_CODE"] || "";
+    contact.state = attrs["STATE"] || "";
+    contact.country = attrs["COUNTRY"] || "";
+    contact.website = attrs["URL"] || "";
+    contact.notes = attrs["NOTE"] || "";
+    contact.salutation = attrs["SALUTATION"] || "";
+    contact.title = attrs["TITLE"] || "";
+    contact.birthday = attrs["BIRTHDAY"] || "";
+
+    return contact;
+  }
+
+  private mapToStarface(
+    contact: UnifiedContact,
+    addressBook: StarfaceAddressBook
+  ): StarfaceContact {
+    const attributes: StarfaceContactAttribute[] = [];
+
+    const addAttr = (displayKey: string, name: string, value: string) => {
+      if (value) {
+        attributes.push({ displayKey, name: name.toLowerCase(), value });
+      }
+    };
+
+    addAttr("NAME", "firstName", contact.firstName);
+    addAttr("SURNAME", "lastName", contact.lastName);
+    addAttr("COMPANY", "company", contact.company);
+    addAttr("JOB_TITLE", "jobTitle", contact.jobTitle);
+    addAttr("EMAIL", "email", contact.email);
+    addAttr("OFFICE_PHONE_NUMBER", "businessPhone", contact.phoneWork);
+    addAttr("MOBILE_PHONE_NUMBER", "mobilePhone", contact.phoneMobile);
+    addAttr("PRIVATE_PHONE_NUMBER", "homePhone", contact.phoneHome);
+    addAttr("FAX_NUMBER", "fax", contact.fax);
+    addAttr("STREET", "street", contact.street);
+    addAttr("CITY", "city", contact.city);
+    addAttr("POSTAL_CODE", "postalCode", contact.postalCode);
+    addAttr("STATE", "state", contact.state);
+    addAttr("COUNTRY", "country", contact.country);
+    addAttr("URL", "website", contact.website);
+    addAttr("NOTE", "notes", contact.notes);
+    addAttr("SALUTATION", "salutation", contact.salutation);
+    addAttr("TITLE", "title", contact.title);
+    addAttr("BIRTHDAY", "birthday", contact.birthday);
+
+    const sc: StarfaceContact = {
+      id: contact.starfaceId || "",
+      blocks: [
+        {
+          name: "contact",
+          resourceKey: "contact",
+          attributes,
+        },
+      ],
+    };
+
+    return sc;
+  }
+}

src/services/sync-engine.ts

@@ -0,0 +1,296 @@
+import {
+  SyncProfile,
+  SyncMapping,
+  SyncResult,
+  UnifiedContact,
+} from "../models/types";
+import { StarfaceApiClient } from "./starface-api";
+import { OutlookContactsService } from "./outlook-contacts";
+import { ProfileManager } from "./profile-manager";
+
+/** Simple hash of contact fields for change detection */
+function hashContact(c: UnifiedContact): string {
+  const fields = [
+    c.firstName, c.lastName, c.company, c.jobTitle,
+    c.email, c.emailSecondary,
+    c.phoneWork, c.phoneMobile, c.phoneHome, c.fax,
+    c.street, c.city, c.postalCode, c.state, c.country,
+    c.website, c.notes, c.salutation, c.title, c.birthday,
+  ];
+  return fields.join("|");
+}
+
+/** Match contacts by name + email (since IDs differ between systems) */
+function findMatch(
+  contact: UnifiedContact,
+  candidates: UnifiedContact[]
+): UnifiedContact | null {
+  // First try exact email match
+  if (contact.email) {
+    const byEmail = candidates.find(
+      (c) => c.email && c.email.toLowerCase() === contact.email.toLowerCase()
+    );
+    if (byEmail) return byEmail;
+  }
+
+  // Then try name match
+  if (contact.firstName || contact.lastName) {
+    const byName = candidates.find(
+      (c) =>
+        c.firstName.toLowerCase() === contact.firstName.toLowerCase() &&
+        c.lastName.toLowerCase() === contact.lastName.toLowerCase() &&
+        (c.firstName !== "" || c.lastName !== "")
+    );
+    if (byName) return byName;
+  }
+
+  return null;
+}
+
+export class SyncEngine {
+  private outlookService: OutlookContactsService;
+  private profileManager: ProfileManager;
+
+  constructor() {
+    this.outlookService = new OutlookContactsService();
+    this.profileManager = new ProfileManager();
+  }
+
+  async syncProfile(
+    profile: SyncProfile,
+    onProgress?: (msg: string) => void
+  ): Promise<SyncResult> {
+    const result: SyncResult = {
+      profileId: profile.id,
+      profileName: profile.name,
+      timestamp: new Date().toISOString(),
+      created: 0,
+      updated: 0,
+      deleted: 0,
+      errors: [],
+      direction: profile.syncDirection,
+    };
+
+    const log = (msg: string) => {
+      onProgress?.(msg);
+    };
+
+    try {
+      // Connect to Starface
+      log("Verbinde mit Starface...");
+      const starface = new StarfaceApiClient(profile.starfaceConnection);
+      const loginOk = await starface.login();
+      if (!loginOk) {
+        result.errors.push("Starface-Login fehlgeschlagen");
+        return result;
+      }
+
+      // Load existing sync mappings
+      const mappings = this.profileManager.getSyncMappings(profile.id);
+
+      // Get contacts from both systems
+      log("Lade Outlook-Kontakte...");
+      const outlookContacts = await this.outlookService.getContacts(
+        profile.outlookFolderId
+      );
+      log(`${outlookContacts.length} Outlook-Kontakte geladen`);
+
+      log("Lade Starface-Kontakte...");
+      const starfaceContacts = await starface.getContacts(
+        profile.starfaceAddressBook
+      );
+      log(`${starfaceContacts.length} Starface-Kontakte geladen`);
+
+      // Build lookup maps from existing mappings
+      const mappingByOutlook = new Map<string, SyncMapping>();
+      const mappingByStarface = new Map<string, SyncMapping>();
+      for (const m of mappings) {
+        mappingByOutlook.set(m.outlookId, m);
+        mappingByStarface.set(m.starfaceId, m);
+      }
+
+      // Sync Outlook -> Starface
+      if (
+        profile.syncDirection === "both" ||
+        profile.syncDirection === "outlook-to-starface"
+      ) {
+        log("Synchronisiere Outlook → Starface...");
+        for (const oc of outlookContacts) {
+          try {
+            const existingMapping = oc.outlookId
+              ? mappingByOutlook.get(oc.outlookId)
+              : null;
+
+            if (existingMapping) {
+              // Known contact - check if changed
+              const currentHash = hashContact(oc);
+              if (currentHash !== existingMapping.lastSyncHash) {
+                const ok = await starface.updateContact(
+                  existingMapping.starfaceId,
+                  oc,
+                  profile.starfaceAddressBook
+                );
+                if (ok) {
+                  existingMapping.lastSyncHash = currentHash;
+                  result.updated++;
+                }
+              }
+            } else {
+              // New contact - check if exists in Starface by name/email
+              const match = findMatch(oc, starfaceContacts);
+              if (match && match.starfaceId) {
+                // Link existing
+                const ok = await starface.updateContact(
+                  match.starfaceId,
+                  oc,
+                  profile.starfaceAddressBook
+                );
+                if (ok) {
+                  this.profileManager.addSyncMapping({
+                    profileId: profile.id,
+                    outlookId: oc.outlookId || "",
+                    starfaceId: match.starfaceId,
+                    lastSyncHash: hashContact(oc),
+                  });
+                  result.updated++;
+                }
+              } else {
+                // Create new in Starface
+                const created = await starface.createContact(
+                  oc,
+                  profile.starfaceAddressBook
+                );
+                if (created?.starfaceId) {
+                  this.profileManager.addSyncMapping({
+                    profileId: profile.id,
+                    outlookId: oc.outlookId || "",
+                    starfaceId: created.starfaceId,
+                    lastSyncHash: hashContact(oc),
+                  });
+                  result.created++;
+                }
+              }
+            }
+          } catch (err) {
+            result.errors.push(
+              `Fehler bei ${oc.firstName} ${oc.lastName}: ${err}`
+            );
+          }
+        }
+      }
+
+      // Sync Starface -> Outlook
+      if (
+        profile.syncDirection === "both" ||
+        profile.syncDirection === "starface-to-outlook"
+      ) {
+        log("Synchronisiere Starface → Outlook...");
+        for (const sc of starfaceContacts) {
+          try {
+            const existingMapping = sc.starfaceId
+              ? mappingByStarface.get(sc.starfaceId)
+              : null;
+
+            if (existingMapping) {
+              // Known contact - check if changed on Starface side
+              const currentHash = hashContact(sc);
+              if (currentHash !== existingMapping.lastSyncHash) {
+                const ok = await this.outlookService.updateContact(
+                  existingMapping.outlookId,
+                  sc
+                );
+                if (ok) {
+                  existingMapping.lastSyncHash = currentHash;
+                  result.updated++;
+                }
+              }
+            } else {
+              // New in Starface - check if exists in Outlook
+              const match = findMatch(sc, outlookContacts);
+              if (match && match.outlookId) {
+                // Link existing
+                const ok = await this.outlookService.updateContact(
+                  match.outlookId,
+                  sc
+                );
+                if (ok) {
+                  this.profileManager.addSyncMapping({
+                    profileId: profile.id,
+                    outlookId: match.outlookId,
+                    starfaceId: sc.starfaceId || "",
+                    lastSyncHash: hashContact(sc),
+                  });
+                  result.updated++;
+                }
+              } else {
+                // Create new in Outlook
+                const created = await this.outlookService.createContact(
+                  sc,
+                  profile.outlookFolderId
+                );
+                if (created?.outlookId) {
+                  this.profileManager.addSyncMapping({
+                    profileId: profile.id,
+                    outlookId: created.outlookId,
+                    starfaceId: sc.starfaceId || "",
+                    lastSyncHash: hashContact(sc),
+                  });
+                  result.created++;
+                }
+              }
+            }
+          } catch (err) {
+            result.errors.push(
+              `Fehler bei ${sc.firstName} ${sc.lastName}: ${err}`
+            );
+          }
+        }
+      }
+
+      // Update last sync time
+      this.profileManager.updateLastSync(profile.id);
+
+      // Save updated mappings
+      this.profileManager.saveSyncMappings(profile.id, mappings);
+
+      // Logout
+      await starface.logout();
+      log("Synchronisation abgeschlossen!");
+    } catch (err) {
+      result.errors.push(`Allgemeiner Fehler: ${err}`);
+    }
+
+    return result;
+  }
+
+  async testStarfaceConnection(
+    connection: import("../models/types").StarfaceConnection
+  ): Promise<{ success: boolean; message: string }> {
+    try {
+      const client = new StarfaceApiClient(connection);
+      const ok = await client.login();
+      if (ok) {
+        await client.logout();
+        return { success: true, message: "Verbindung erfolgreich!" };
+      }
+      return { success: false, message: "Login fehlgeschlagen" };
+    } catch (err) {
+      return { success: false, message: `Fehler: ${err}` };
+    }
+  }
+
+  async loadStarfaceAddressBooks(
+    connection: import("../models/types").StarfaceConnection
+  ): Promise<import("../models/types").StarfaceAddressBook[]> {
+    const client = new StarfaceApiClient(connection);
+    const ok = await client.login();
+    if (!ok) return [];
+    const books = await client.getAvailableAddressBooks();
+    await client.logout();
+    return books;
+  }
+
+  async loadOutlookFolders(): Promise<import("../models/types").OutlookContactFolder[]> {
+    return this.outlookService.getContactFolders();
+  }
+}

src/taskpane/components/AboutDialog.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import {
+  Modal,
+  IconButton,
+  Stack,
+  Text,
+} from "@fluentui/react";
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const AboutDialog: React.FC<Props> = ({ isOpen, onClose }) => {
+  return (
+    <Modal
+      isOpen={isOpen}
+      onDismiss={onClose}
+      isBlocking={false}
+      containerClassName="about-modal"
+    >
+      <div className="about-dialog">
+        <div className="about-header">
+          <Text variant="xLarge">Info</Text>
+          <IconButton
+            iconProps={{ iconName: "Cancel" }}
+            onClick={onClose}
+            ariaLabel="Schließen"
+            className="about-close-btn"
+          />
+        </div>
+
+        <div className="about-content">
+          <div className="about-logo">
+            <Text variant="xxLarge" className="about-product-name">
+              Outlook-SYNC &harr; Starface
+            </Text>
+            <Text variant="small" className="about-version">
+              Version 0.0.0.1
+            </Text>
+          </div>
+
+          <div className="about-divider" />
+
+          <div className="about-company">
+            <Text variant="large" block className="about-company-name">
+              HackerSoft
+            </Text>
+            <Text variant="medium" block className="about-company-sub">
+              Hacker-Net Telekommunikation
+            </Text>
+          </div>
+
+          <div className="about-address">
+            <Text variant="small" block>Stefan Hacker</Text>
+            <Text variant="small" block>Am Wunderburgpark 5b</Text>
+            <Text variant="small" block>26135 Oldenburg</Text>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};

src/taskpane/components/App.tsx

@@ -0,0 +1,82 @@
+import React, { useState } from "react";
+import { ThemeProvider, createTheme, IconButton } from "@fluentui/react";
+import { ProfileList } from "./ProfileList";
+import { ProfileEditor } from "./ProfileEditor";
+import { SyncView } from "./SyncView";
+import { AboutDialog } from "./AboutDialog";
+import { SyncProfile } from "../../models/types";
+
+const theme = createTheme({
+  palette: {
+    themePrimary: "#0078d4",
+    themeDark: "#005a9e",
+    neutralLight: "#f3f2f1",
+  },
+});
+
+type View = "list" | "edit" | "sync";
+
+export const App: React.FC = () => {
+  const [view, setView] = useState<View>("list");
+  const [editProfile, setEditProfile] = useState<SyncProfile | null>(null);
+  const [syncProfileId, setSyncProfileId] = useState<string | null>(null);
+  const [showAbout, setShowAbout] = useState(false);
+
+  const handleNewProfile = () => {
+    setEditProfile(null);
+    setView("edit");
+  };
+
+  const handleEditProfile = (profile: SyncProfile) => {
+    setEditProfile(profile);
+    setView("edit");
+  };
+
+  const handleSync = (profileId: string) => {
+    setSyncProfileId(profileId);
+    setView("sync");
+  };
+
+  const handleBack = () => {
+    setView("list");
+    setEditProfile(null);
+    setSyncProfileId(null);
+  };
+
+  return (
+    <ThemeProvider theme={theme}>
+      <div className="app-container">
+        <header className="app-header">
+          <h1>Starface Kontakt-Sync</h1>
+          <IconButton
+            iconProps={{ iconName: "Info" }}
+            title="Info"
+            ariaLabel="Info"
+            onClick={() => setShowAbout(true)}
+            className="header-info-btn"
+          />
+        </header>
+        <AboutDialog isOpen={showAbout} onClose={() => setShowAbout(false)} />
+        <main className="app-main">
+          {view === "list" && (
+            <ProfileList
+              onNew={handleNewProfile}
+              onEdit={handleEditProfile}
+              onSync={handleSync}
+            />
+          )}
+          {view === "edit" && (
+            <ProfileEditor
+              profile={editProfile}
+              onSave={handleBack}
+              onCancel={handleBack}
+            />
+          )}
+          {view === "sync" && syncProfileId && (
+            <SyncView profileId={syncProfileId} onBack={handleBack} />
+          )}
+        </main>
+      </div>
+    </ThemeProvider>
+  );
+};

src/taskpane/components/ProfileEditor.tsx

@@ -0,0 +1,355 @@
+import React, { useState, useEffect } from "react";
+import {
+  PrimaryButton,
+  DefaultButton,
+  TextField,
+  Dropdown,
+  IDropdownOption,
+  Stack,
+  Text,
+  Toggle,
+  Spinner,
+  SpinnerSize,
+  MessageBar,
+  MessageBarType,
+} from "@fluentui/react";
+import {
+  SyncProfile,
+  StarfaceConnection,
+  StarfaceAddressBook,
+  OutlookContactFolder,
+} from "../../models/types";
+import { ProfileManager } from "../../services/profile-manager";
+import { SyncEngine } from "../../services/sync-engine";
+
+interface Props {
+  profile: SyncProfile | null;
+  onSave: () => void;
+  onCancel: () => void;
+}
+
+const defaultConnection: StarfaceConnection = {
+  host: "",
+  port: 443,
+  useSsl: true,
+  loginId: "",
+  password: "",
+};
+
+export const ProfileEditor: React.FC<Props> = ({
+  profile,
+  onSave,
+  onCancel,
+}) => {
+  const pm = new ProfileManager();
+  const engine = new SyncEngine();
+  const isNew = !profile;
+
+  const [name, setName] = useState(profile?.name || "");
+  const [connection, setConnection] = useState<StarfaceConnection>(
+    profile?.starfaceConnection || { ...defaultConnection }
+  );
+  const [addressBooks, setAddressBooks] = useState<StarfaceAddressBook[]>([]);
+  const [selectedBook, setSelectedBook] = useState<StarfaceAddressBook | null>(
+    profile?.starfaceAddressBook || null
+  );
+  const [outlookFolders, setOutlookFolders] = useState<OutlookContactFolder[]>(
+    []
+  );
+  const [selectedFolderId, setSelectedFolderId] = useState(
+    profile?.outlookFolderId || ""
+  );
+  const [syncDirection, setSyncDirection] = useState<SyncProfile["syncDirection"]>(
+    profile?.syncDirection || "both"
+  );
+  const [enabled, setEnabled] = useState(profile?.enabled ?? true);
+
+  const [loading, setLoading] = useState(false);
+  const [testResult, setTestResult] = useState<{
+    success: boolean;
+    message: string;
+  } | null>(null);
+  const [error, setError] = useState("");
+
+  // Load Outlook folders on mount
+  useEffect(() => {
+    loadOutlookFolders();
+  }, []);
+
+  const loadOutlookFolders = async () => {
+    try {
+      const folders = await engine.loadOutlookFolders();
+      setOutlookFolders(folders);
+      if (!selectedFolderId && folders.length > 0) {
+        setSelectedFolderId(folders[0].id);
+      }
+    } catch (err) {
+      console.error("Failed to load Outlook folders:", err);
+      // Provide a default folder option
+      setOutlookFolders([{ id: "default", displayName: "Kontakte (Standard)" }]);
+      if (!selectedFolderId) setSelectedFolderId("default");
+    }
+  };
+
+  const handleTestConnection = async () => {
+    setLoading(true);
+    setTestResult(null);
+    const result = await engine.testStarfaceConnection(connection);
+    setTestResult(result);
+    if (!result.success && result.message.toLowerCase().includes("fetch")) {
+      result.message +=
+        "\n\nMögliche Ursache: Das SSL-Zertifikat der Starface ist nicht vertrauenswürdig. " +
+        "Bitte als Administrator ausführen:\n" +
+        `import-cert.ps1 -StarfaceHost ${connection.host} -Port ${connection.port}`;
+    }
+    setLoading(false);
+  };
+
+  const handleLoadAddressBooks = async () => {
+    setLoading(true);
+    setError("");
+    try {
+      const books = await engine.loadStarfaceAddressBooks(connection);
+      setAddressBooks(books);
+      if (books.length > 0 && !selectedBook) {
+        setSelectedBook(books[0]);
+      }
+      if (books.length === 0) {
+        setError("Keine Adressbücher gefunden");
+      }
+    } catch (err) {
+      setError(`Fehler: ${err}`);
+    }
+    setLoading(false);
+  };
+
+  const handleSave = () => {
+    if (!name.trim()) {
+      setError("Bitte einen Profilnamen eingeben");
+      return;
+    }
+    if (!connection.host.trim()) {
+      setError("Bitte Starface-Host eingeben");
+      return;
+    }
+    if (!selectedBook) {
+      setError("Bitte ein Starface-Adressbuch auswählen");
+      return;
+    }
+    if (!selectedFolderId) {
+      setError("Bitte einen Outlook-Ordner auswählen");
+      return;
+    }
+
+    const selectedFolder = outlookFolders.find(
+      (f) => f.id === selectedFolderId
+    );
+
+    const newProfile: SyncProfile = {
+      id: profile?.id || pm.generateId(),
+      name: name.trim(),
+      starfaceConnection: connection,
+      starfaceAddressBook: selectedBook,
+      outlookFolderId: selectedFolderId,
+      outlookFolderName:
+        selectedFolder?.displayName || "Kontakte",
+      syncDirection,
+      lastSync: profile?.lastSync,
+      enabled,
+    };
+
+    if (isNew) {
+      pm.addProfile(newProfile);
+    } else {
+      pm.updateProfile(newProfile);
+    }
+
+    onSave();
+  };
+
+  const directionOptions: IDropdownOption[] = [
+    { key: "both", text: "Bidirektional (↔)" },
+    { key: "outlook-to-starface", text: "Outlook → Starface" },
+    { key: "starface-to-outlook", text: "Starface → Outlook" },
+  ];
+
+  const bookOptions: IDropdownOption[] = addressBooks.map((b, i) => ({
+    key: i.toString(),
+    text: b.name,
+    data: b,
+  }));
+
+  const folderOptions: IDropdownOption[] = outlookFolders.map((f) => ({
+    key: f.id,
+    text: f.displayName,
+  }));
+
+  return (
+    <div className="profile-editor">
+      <Stack tokens={{ childrenGap: 16 }}>
+        <Stack horizontal horizontalAlign="space-between" verticalAlign="center">
+          <Text variant="xLarge">
+            {isNew ? "Neues Profil" : "Profil bearbeiten"}
+          </Text>
+          <DefaultButton text="Zurück" onClick={onCancel} />
+        </Stack>
+
+        {error && (
+          <MessageBar
+            messageBarType={MessageBarType.error}
+            onDismiss={() => setError("")}
+          >
+            {error}
+          </MessageBar>
+        )}
+
+        <TextField
+          label="Profilname"
+          value={name}
+          onChange={(_, v) => setName(v || "")}
+          placeholder="z.B. Firmenkontakte Hauptanlage"
+          required
+        />
+
+        <Text variant="large" className="section-title">
+          Starface-Verbindung
+        </Text>
+
+        <Stack horizontal tokens={{ childrenGap: 8 }}>
+          <Stack.Item grow>
+            <TextField
+              label="Host / IP-Adresse"
+              value={connection.host}
+              onChange={(_, v) =>
+                setConnection({ ...connection, host: v || "" })
+              }
+              placeholder="z.B. pbx.firma.de oder 192.168.1.100"
+              required
+            />
+          </Stack.Item>
+          <TextField
+            label="Port"
+            value={connection.port.toString()}
+            onChange={(_, v) =>
+              setConnection({ ...connection, port: parseInt(v || "443") || 443 })
+            }
+            styles={{ root: { width: 80 } }}
+          />
+        </Stack>
+
+        <Toggle
+          label="HTTPS verwenden"
+          checked={connection.useSsl}
+          onChange={(_, checked) =>
+            setConnection({
+              ...connection,
+              useSsl: checked ?? true,
+              port: checked ? 443 : 80,
+            })
+          }
+        />
+
+        <TextField
+          label="Login-ID"
+          value={connection.loginId}
+          onChange={(_, v) =>
+            setConnection({ ...connection, loginId: v || "" })
+          }
+          required
+        />
+
+        <TextField
+          label="Kennwort"
+          type="password"
+          value={connection.password}
+          onChange={(_, v) =>
+            setConnection({ ...connection, password: v || "" })
+          }
+          canRevealPassword
+          required
+        />
+
+        <Stack horizontal tokens={{ childrenGap: 8 }}>
+          <DefaultButton
+            text="Verbindung testen"
+            onClick={handleTestConnection}
+            disabled={loading || !connection.host || !connection.loginId}
+          />
+          <PrimaryButton
+            text="Adressbücher laden"
+            onClick={handleLoadAddressBooks}
+            disabled={loading || !connection.host || !connection.loginId}
+          />
+          {loading && <Spinner size={SpinnerSize.small} />}
+        </Stack>
+
+        {testResult && (
+          <MessageBar
+            messageBarType={
+              testResult.success
+                ? MessageBarType.success
+                : MessageBarType.error
+            }
+          >
+            {testResult.message.split("\n").map((line, i) => (
+              <span key={i}>
+                {i > 0 && <br />}
+                {line}
+              </span>
+            ))}
+          </MessageBar>
+        )}
+
+        {addressBooks.length > 0 && (
+          <Dropdown
+            label="Starface-Adressbuch"
+            options={bookOptions}
+            selectedKey={
+              selectedBook
+                ? addressBooks.indexOf(selectedBook).toString()
+                : undefined
+            }
+            onChange={(_, option) => {
+              if (option?.data) setSelectedBook(option.data);
+            }}
+            required
+          />
+        )}
+
+        <Text variant="large" className="section-title">
+          Outlook-Einstellungen
+        </Text>
+
+        <Dropdown
+          label="Outlook Kontakte-Ordner"
+          options={folderOptions}
+          selectedKey={selectedFolderId}
+          onChange={(_, option) => {
+            if (option) setSelectedFolderId(option.key as string);
+          }}
+          required
+        />
+
+        <Dropdown
+          label="Synchronisationsrichtung"
+          options={directionOptions}
+          selectedKey={syncDirection}
+          onChange={(_, option) => {
+            if (option) setSyncDirection(option.key as SyncProfile["syncDirection"]);
+          }}
+        />
+
+        <Toggle
+          label="Profil aktiviert"
+          checked={enabled}
+          onChange={(_, checked) => setEnabled(checked ?? true)}
+        />
+
+        <Stack horizontal tokens={{ childrenGap: 8 }}>
+          <PrimaryButton text="Speichern" onClick={handleSave} />
+          <DefaultButton text="Abbrechen" onClick={onCancel} />
+        </Stack>
+      </Stack>
+    </div>
+  );
+};

src/taskpane/components/ProfileList.tsx

@@ -0,0 +1,138 @@
+import React, { useState, useEffect } from "react";
+import {
+  PrimaryButton,
+  DefaultButton,
+  IconButton,
+  Stack,
+  Text,
+  MessageBar,
+  MessageBarType,
+  Toggle,
+} from "@fluentui/react";
+import { SyncProfile } from "../../models/types";
+import { ProfileManager } from "../../services/profile-manager";
+
+interface Props {
+  onNew: () => void;
+  onEdit: (profile: SyncProfile) => void;
+  onSync: (profileId: string) => void;
+}
+
+export const ProfileList: React.FC<Props> = ({ onNew, onEdit, onSync }) => {
+  const [profiles, setProfiles] = useState<SyncProfile[]>([]);
+  const pm = new ProfileManager();
+
+  useEffect(() => {
+    setProfiles(pm.getProfiles());
+  }, []);
+
+  const handleDelete = (id: string) => {
+    if (confirm("Profil wirklich löschen?")) {
+      pm.deleteProfile(id);
+      setProfiles(pm.getProfiles());
+    }
+  };
+
+  const handleToggle = (id: string, enabled: boolean) => {
+    const profile = pm.getProfile(id);
+    if (profile) {
+      profile.enabled = enabled;
+      pm.updateProfile(profile);
+      setProfiles(pm.getProfiles());
+    }
+  };
+
+  const formatDate = (iso?: string) => {
+    if (!iso) return "Noch nie";
+    return new Date(iso).toLocaleString("de-DE");
+  };
+
+  return (
+    <div className="profile-list">
+      <Stack tokens={{ childrenGap: 12 }}>
+        <Stack horizontal horizontalAlign="space-between" verticalAlign="center">
+          <Text variant="xLarge">Sync-Profile</Text>
+          <PrimaryButton
+            text="Neues Profil"
+            iconProps={{ iconName: "Add" }}
+            onClick={onNew}
+          />
+        </Stack>
+
+        {profiles.length === 0 && (
+          <MessageBar messageBarType={MessageBarType.info}>
+            Noch keine Sync-Profile angelegt. Erstellen Sie ein neues Profil, um
+            Kontakte zu synchronisieren.
+          </MessageBar>
+        )}
+
+        {profiles.map((profile) => (
+          <div key={profile.id} className="profile-card">
+            <Stack tokens={{ childrenGap: 8 }}>
+              <Stack
+                horizontal
+                horizontalAlign="space-between"
+                verticalAlign="center"
+              >
+                <Text variant="large" className="profile-name">
+                  {profile.name}
+                </Text>
+                <Toggle
+                  checked={profile.enabled}
+                  onChange={(_, checked) =>
+                    handleToggle(profile.id, checked ?? false)
+                  }
+                  onText="Aktiv"
+                  offText="Inaktiv"
+                />
+              </Stack>
+
+              <div className="profile-details">
+                <Text variant="small" block>
+                  <strong>Starface:</strong>{" "}
+                  {profile.starfaceConnection.host} &rarr;{" "}
+                  {profile.starfaceAddressBook.name}
+                </Text>
+                <Text variant="small" block>
+                  <strong>Outlook:</strong> {profile.outlookFolderName}
+                </Text>
+                <Text variant="small" block>
+                  <strong>Richtung:</strong>{" "}
+                  {profile.syncDirection === "both"
+                    ? "Bidirektional"
+                    : profile.syncDirection === "outlook-to-starface"
+                    ? "Outlook → Starface"
+                    : "Starface → Outlook"}
+                </Text>
+                <Text variant="small" block>
+                  <strong>Letzte Sync:</strong>{" "}
+                  {formatDate(profile.lastSync)}
+                </Text>
+              </div>
+
+              <Stack horizontal tokens={{ childrenGap: 8 }}>
+                <PrimaryButton
+                  text="Jetzt synchronisieren"
+                  iconProps={{ iconName: "Sync" }}
+                  onClick={() => onSync(profile.id)}
+                  disabled={!profile.enabled}
+                />
+                <DefaultButton
+                  text="Bearbeiten"
+                  iconProps={{ iconName: "Edit" }}
+                  onClick={() => onEdit(profile)}
+                />
+                <IconButton
+                  iconProps={{ iconName: "Delete" }}
+                  title="Löschen"
+                  onClick={() => handleDelete(profile.id)}
+                  className="delete-btn"
+                />
+              </Stack>
+            </Stack>
+          </div>
+        ))}
+      </Stack>
+    </div>
+  );
+};

src/taskpane/components/SyncView.tsx

@@ -0,0 +1,176 @@
+import React, { useState, useEffect, useRef } from "react";
+import {
+  PrimaryButton,
+  DefaultButton,
+  Stack,
+  Text,
+  ProgressIndicator,
+  MessageBar,
+  MessageBarType,
+} from "@fluentui/react";
+import { SyncResult } from "../../models/types";
+import { ProfileManager } from "../../services/profile-manager";
+import { SyncEngine } from "../../services/sync-engine";
+
+interface Props {
+  profileId: string;
+  onBack: () => void;
+}
+
+export const SyncView: React.FC<Props> = ({ profileId, onBack }) => {
+  const pm = new ProfileManager();
+  const profile = pm.getProfile(profileId);
+
+  const [running, setRunning] = useState(false);
+  const [progress, setProgress] = useState<string[]>([]);
+  const [result, setResult] = useState<SyncResult | null>(null);
+  const logRef = useRef<HTMLDivElement>(null);
+
+  const addProgress = (msg: string) => {
+    setProgress((prev) => [...prev, `[${new Date().toLocaleTimeString("de-DE")}] ${msg}`]);
+  };
+
+  useEffect(() => {
+    if (logRef.current) {
+      logRef.current.scrollTop = logRef.current.scrollHeight;
+    }
+  }, [progress]);
+
+  const handleSync = async () => {
+    if (!profile) return;
+
+    setRunning(true);
+    setProgress([]);
+    setResult(null);
+    addProgress("Synchronisation gestartet...");
+
+    const engine = new SyncEngine();
+    const syncResult = await engine.syncProfile(profile, (msg) => {
+      addProgress(msg);
+    });
+
+    setResult(syncResult);
+    setRunning(false);
+    addProgress("Fertig.");
+  };
+
+  if (!profile) {
+    return (
+      <MessageBar messageBarType={MessageBarType.error}>
+        Profil nicht gefunden.
+        <DefaultButton text="Zurück" onClick={onBack} />
+      </MessageBar>
+    );
+  }
+
+  return (
+    <div className="sync-view">
+      <Stack tokens={{ childrenGap: 12 }}>
+        <Stack horizontal horizontalAlign="space-between" verticalAlign="center">
+          <Text variant="xLarge">Synchronisation</Text>
+          <DefaultButton text="Zurück" onClick={onBack} disabled={running} />
+        </Stack>
+
+        <div className="sync-info">
+          <Text variant="medium" block>
+            <strong>Profil:</strong> {profile.name}
+          </Text>
+          <Text variant="small" block>
+            {profile.starfaceConnection.host} ({profile.starfaceAddressBook.name})
+            {" ↔ "}
+            {profile.outlookFolderName}
+          </Text>
+        </div>
+
+        {!running && !result && (
+          <PrimaryButton
+            text="Synchronisation starten"
+            iconProps={{ iconName: "Sync" }}
+            onClick={handleSync}
+          />
+        )}
+
+        {running && (
+          <ProgressIndicator
+            label="Synchronisiere..."
+            description="Bitte warten..."
+          />
+        )}
+
+        {progress.length > 0 && (
+          <div className="sync-log" ref={logRef}>
+            {progress.map((msg, i) => (
+              <Text key={i} variant="small" block className="log-line">
+                {msg}
+              </Text>
+            ))}
+          </div>
+        )}
+
+        {result && (
+          <div className="sync-result">
+            {result.errors.length === 0 ? (
+              <MessageBar messageBarType={MessageBarType.success}>
+                Synchronisation erfolgreich abgeschlossen!
+              </MessageBar>
+            ) : (
+              <MessageBar messageBarType={MessageBarType.warning}>
+                Synchronisation mit {result.errors.length} Fehler(n)
+                abgeschlossen.
+              </MessageBar>
+            )}
+
+            <div className="result-stats">
+              <Stack horizontal tokens={{ childrenGap: 24 }}>
+                <div className="stat">
+                  <Text variant="xxLarge" className="stat-number">
+                    {result.created}
+                  </Text>
+                  <Text variant="small">Erstellt</Text>
+                </div>
+                <div className="stat">
+                  <Text variant="xxLarge" className="stat-number">
+                    {result.updated}
+                  </Text>
+                  <Text variant="small">Aktualisiert</Text>
+                </div>
+                <div className="stat">
+                  <Text variant="xxLarge" className="stat-number">
+                    {result.errors.length}
+                  </Text>
+                  <Text variant="small">Fehler</Text>
+                </div>
+              </Stack>
+            </div>
+
+            {result.errors.length > 0 && (
+              <div className="error-list">
+                <Text variant="medium" block>
+                  <strong>Fehler:</strong>
+                </Text>
+                {result.errors.map((err, i) => (
+                  <MessageBar
+                    key={i}
+                    messageBarType={MessageBarType.error}
+                    className="error-item"
+                  >
+                    {err}
+                  </MessageBar>
+                ))}
+              </div>
+            )}
+
+            <Stack horizontal tokens={{ childrenGap: 8 }} className="result-actions">
+              <PrimaryButton
+                text="Erneut synchronisieren"
+                iconProps={{ iconName: "Sync" }}
+                onClick={handleSync}
+              />
+              <DefaultButton text="Zurück zur Übersicht" onClick={onBack} />
+            </Stack>
+          </div>
+        )}
+      </Stack>
+    </div>
+  );
+};

src/taskpane/index.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./components/App";
+import "./styles/taskpane.css";
+
+/* global Office */
+
+Office.onReady((info) => {
+  if (info.host === Office.HostType.Outlook) {
+    const container = document.getElementById("root");
+    if (container) {
+      const root = createRoot(container);
+      root.render(<App />);
+    }
+  }
+});

src/taskpane/styles/taskpane.css

@@ -0,0 +1,259 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
+  font-size: 14px;
+  color: #323130;
+  background: #faf9f8;
+}
+
+.app-container {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 0;
+}
+
+.app-header {
+  background: linear-gradient(135deg, #0078d4, #005a9e);
+  color: white;
+  padding: 16px 20px;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.app-header h1 {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.header-info-btn {
+  color: white !important;
+  background: transparent !important;
+}
+
+.header-info-btn:hover {
+  background: rgba(255, 255, 255, 0.15) !important;
+}
+
+/* About Dialog */
+.about-modal {
+  max-width: 360px;
+  border-radius: 8px;
+}
+
+.about-dialog {
+  padding: 0;
+}
+
+.about-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px 8px;
+}
+
+.about-close-btn {
+  color: #605e5c !important;
+}
+
+.about-content {
+  padding: 0 20px 24px;
+  text-align: center;
+}
+
+.about-logo {
+  padding: 16px 0;
+}
+
+.about-product-name {
+  font-weight: 700 !important;
+  color: #0078d4 !important;
+  display: block;
+}
+
+.about-version {
+  color: #605e5c !important;
+  display: block;
+  margin-top: 4px;
+}
+
+.about-divider {
+  height: 1px;
+  background: #edebe9;
+  margin: 16px 0;
+}
+
+.about-company {
+  margin-bottom: 12px;
+}
+
+.about-company-name {
+  font-weight: 700 !important;
+}
+
+.about-company-sub {
+  color: #605e5c !important;
+}
+
+.about-address {
+  color: #605e5c;
+  line-height: 1.6;
+}
+
+.app-main {
+  padding: 16px 20px;
+}
+
+/* Profile List */
+.profile-list {
+  animation: fadeIn 0.2s ease;
+}
+
+.profile-card {
+  background: white;
+  border: 1px solid #edebe9;
+  border-radius: 4px;
+  padding: 16px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  transition: box-shadow 0.15s;
+}
+
+.profile-card:hover {
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
+}
+
+.profile-name {
+  font-weight: 600;
+}
+
+.profile-details {
+  background: #f3f2f1;
+  border-radius: 4px;
+  padding: 10px 12px;
+}
+
+.profile-details .ms-Text {
+  margin-bottom: 2px;
+}
+
+.delete-btn {
+  color: #a4262c !important;
+}
+
+.delete-btn:hover {
+  background: #fde7e9 !important;
+}
+
+/* Profile Editor */
+.profile-editor {
+  animation: fadeIn 0.2s ease;
+}
+
+.section-title {
+  font-weight: 600;
+  margin-top: 8px;
+  padding-top: 12px;
+  border-top: 1px solid #edebe9;
+}
+
+/* Sync View */
+.sync-view {
+  animation: fadeIn 0.2s ease;
+}
+
+.sync-info {
+  background: #f3f2f1;
+  border-radius: 4px;
+  padding: 12px;
+}
+
+.sync-log {
+  background: #1e1e1e;
+  color: #d4d4d4;
+  border-radius: 4px;
+  padding: 12px;
+  max-height: 250px;
+  overflow-y: auto;
+  font-family: "Cascadia Code", "Consolas", monospace;
+  font-size: 12px;
+}
+
+.log-line {
+  padding: 1px 0;
+  font-family: inherit !important;
+  color: #d4d4d4 !important;
+}
+
+.sync-result {
+  margin-top: 8px;
+}
+
+.result-stats {
+  background: white;
+  border: 1px solid #edebe9;
+  border-radius: 4px;
+  padding: 16px;
+  margin: 12px 0;
+  text-align: center;
+}
+
+.stat {
+  text-align: center;
+}
+
+.stat-number {
+  color: #0078d4;
+  font-weight: 700;
+  display: block;
+}
+
+.error-list {
+  margin: 12px 0;
+}
+
+.error-item {
+  margin-top: 4px;
+}
+
+.result-actions {
+  margin-top: 12px;
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #c8c6c4;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #a19f9d;
+}

src/taskpane/taskpane.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Starface Kontakt-Sync</title>
+  <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>