Mar 4, 2025 · Feb 12, 2025 · Feb 12, 2025 · Feb 12, 2025 · Feb 19, 2025 · Feb 19, 2025
diff --git a/docs/images/icons/computer-code.svg b/docs/images/icons/computer-code.svg
diff --git a/docs/images/templates/coder-login-web.png b/docs/images/templates/coder-login-web.png
diff --git a/docs/images/user-guides/desktop/coder-desktop-pre-sign-in.png b/docs/images/user-guides/desktop/coder-desktop-pre-sign-in.png
diff --git a/docs/images/user-guides/desktop/coder-desktop-session-token.png b/docs/images/user-guides/desktop/coder-desktop-session-token.png
diff --git a/docs/images/user-guides/desktop/coder-desktop-sign-in.png b/docs/images/user-guides/desktop/coder-desktop-sign-in.png
diff --git a/docs/images/user-guides/desktop/coder-desktop-workspaces.png b/docs/images/user-guides/desktop/coder-desktop-workspaces.png
diff --git a/docs/manifest.json b/docs/manifest.json
 }
 ]
 },
 {
 "title":"Coder Desktop",
 "description":"Use Coder Desktop to access your workspace like it's a local machine",
 "path":"./user-guides/desktop/index.md",
 "icon_path":"./images/icons/computer-code.svg",
 "state": ["earlyaccess"]
 },
 {
 "title":"Workspace Management",
 "description":"Manage workspaces",
diff --git a/docs/user-guides/desktop/index.md b/docs/user-guides/desktop/index.md
 #Coder Desktop

 Use Coder Desktop to work on your workspaces as though they're on your LAN, no
 port-forwarding required.

 ##Install Coder Desktop

 <divclass="tabs">

 You can install Coder Desktop on macOS or Windows.

 ###macOS

 1. Use[Homebrew](https://brew.sh/) to install Coder Desktop:

 ```shell
   brew install --cask coder/coder/coder-desktop
 ```

 1. Open Coder Desktop from the Applications directory and when macOS asks if you want to open it, select**Open**.

 1. The application is treated as a VPN. macOS will prompt you to confirm with:

 **"Coder Desktop" would like to use a new network extension**

   Select**Open System Settings**.

 1. In the**Network Extensions** system settings, enable the Coder Desktop extension.

 1. Continue to the[configuration section](#configure).

 ###Windows

 1. Download the latest`CoderDesktop` executable (`.exe`) from the[coder-desktop-windows repository](https://github.com/coder/coder-desktop-windows/).

   Choose the architecture that fits your Windows system, ARM or x64.

 1. Open the`.exe` files, acknowledge the license terms and conditions, and select**Install**.

 1. Windows asks if you "want to allow this app from an unknown publisher to make changes to your device?"

   Select**Yes**.

 1. The Coder Desktop installation creates a system restore point.
   Depending on your system, this step might take a while.

 1. If .NET is not already installed, the installation might prompt you with the**Windows Desktop Runtime** installation.

   In that installation window, select**Install**. Select**Close** when the Runtime installation completes.

 1. When the Coder Desktop installation completes, select**Close**.

 1. Find and open**Coder Desktop** from your Start Menu.

 1. Some systems require an additional Windows App Runtime.

   Select**Yes** if you are prompted to install it.
   This will open your default browser where you can download and install the latest stable release of Windows App SDK.

   Reopen Coder Desktop after you install Windows App SDK.

 1. Coder Desktop starts minimized in the Windows System Tray.

   You might need to select the**^** in your system tray to show more icons.

 1. Continue to the[configuration section](#configure).

 </div>

 ##Configure

 Before you can use Coder Desktop, you will need to log in.

 1. Open the Desktop menu and select**Sign in**:

   <Imageheight="325px"src="../../images/user-guides/desktop/coder-desktop-pre-sign-in.png"alt="Coder Desktop menu before the user signs in"align="center" />

 1. In the**Sign In** window, enter your Coder deployment's URL and select**Next**:

 ![Coder Desktop sign in](../../images/user-guides/desktop/coder-desktop-sign-in.png)

 1. macOS: Select the link to your deployment's`/cli-auth` page to generate a[session token](../../admin/users/sessions-tokens.md).

   Windows: Select**Generate a token via the Web UI**.

 1. In your web browser, enter your credentials:

   <Imageheight="412px"src="../../images/templates/coder-login-web.png"alt="Log in to your Coder deployment"align="center" />

 1. Copy the session token to the clipboard:

   <Imageheight="350px"src="../../images/templates/coder-session-token.png"alt="Copy session token"align="center" />

 1. Paste the token in the**Session Token** box of the**Sign In** screen, then select**Sign In**:

 ![Paste the session token in to sign in](../../images/user-guides/desktop/coder-desktop-session-token.png)

 1. Allow the VPN configuration for Coder Desktop if your OS prompts you.

 1. Coder Desktop is now running!

 1. Select the Coder icon in the menu bar (macOS) or system tray (Windows) and enable**CoderVPN**.

 ##Workspaces from Coder Desktop

 ![Coder Desktop list of workspaces](../../images/user-guides/desktop/coder-desktop-workspaces.png)

 1. You can use`ping6` in your terminal to verify the connection to your workspace:

 ```shell
   ping6 -c 5 yourworkspacename.coder
 ```

 1. Select your workspace from the Coder Desktop icon.

   Desktop opens the workspace in your browser.

 ![Screenshot of a workspace](../../images/screenshots/workspace-running-with-topbar.png)

 1. Select the IDE you want to use and start working on your code.

 ##CoderVPN

 Placeholder for some information about CoderVPN
diff --git a/site/src/components/Badges/Badges.stories.tsx b/site/src/components/Badges/Badges.stories.tsx
 AlphaBadge,
 Badges,
 DisabledBadge,
 EaBadge,
 EnabledBadge,
 EntitledBadge,
 HealthyBadge,
 children: <AlphaBadge />,
 },
 };
 export const EarlyAccess: Story = {
 args: {
 children: <EaBadge />,
 },
 };
diff --git a/site/src/components/Badges/Badges.tsx b/site/src/components/Badges/Badges.tsx
 );
 };

 export const EaBadge: FC = () => {
 return (
 <span
 css={[
 styles.badge,
 (theme) => ({
 border: `1px solid ${theme.roles.preview.outline}`,
 backgroundColor: theme.roles.preview.background,
 color: theme.roles.preview.text,
 }),
 ]}
 >
 Early Access
 </span>
 );
 };

 export const AlphaBadge: FC = () => {
 return (
 <span
Original file line number	Diff line number	Diff line change
Expand Up		@@ -163,6 +163,13 @@
		}
		]
		},
		{
		"title":"Coder Desktop",
		"description":"Use Coder Desktop to access your workspace like it's a local machine",
		"path":"./user-guides/desktop/index.md",
		"icon_path":"./images/icons/computer-code.svg",
		"state": ["earlyaccess"]
EdwardAngert marked this conversation as resolved. OutdatedShow resolvedHide resolved
		},
		{
		"title":"Workspace Management",
		"description":"Manage workspaces",
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,124 @@
		#Coder Desktop

		Use Coder Desktop to work on your workspaces as though they're on your LAN, no
		port-forwarding required.

		##Install Coder Desktop

		<divclass="tabs">

		You can install Coder Desktop on macOS or Windows.

		###macOS

		1. Use[Homebrew](https://brew.sh/) to install Coder Desktop:

		```shell
		brew install --cask coder/coder/coder-desktop
		```

		1. Open Coder Desktop from the Applications directory and when macOS asks if you want to open it, selectOpen.

		1. The application is treated as a VPN. macOS will prompt you to confirm with:

		"Coder Desktop" would like to use a new network extension

		SelectOpen System Settings.

		1. In theNetwork Extensions system settings, enable the Coder Desktop extension.

		1. Continue to the[configuration section](#configure).

		###Windows

		1. Download the latest`CoderDesktop` executable (`.exe`) from the[coder-desktop-windows repository](https://github.com/coder/coder-desktop-windows/).

		Choose the architecture that fits your Windows system, ARM or x64.
deansheather marked this conversation as resolved. OutdatedShow resolvedHide resolved

		1. Open the`.exe` files, acknowledge the license terms and conditions, and selectInstall.

		1. Windows asks if you "want to allow this app from an unknown publisher to make changes to your device?"

		SelectYes.
deansheather marked this conversation as resolved. OutdatedShow resolvedHide resolved

		1. The Coder Desktop installation creates a system restore point.
		Depending on your system, this step might take a while.
deansheather marked this conversation as resolved. OutdatedShow resolvedHide resolved

		1. If .NET is not already installed, the installation might prompt you with theWindows Desktop Runtime installation.
deansheather marked this conversation as resolved. OutdatedShow resolvedHide resolved

		In that installation window, selectInstall. SelectClose when the Runtime installation completes.

		1. When the Coder Desktop installation completes, selectClose.

		1. Find and openCoder Desktop from your Start Menu.

		1. Some systems require an additional Windows App Runtime.
deansheather marked this conversation as resolved. OutdatedShow resolvedHide resolved

		SelectYes if you are prompted to install it.
		This will open your default browser where you can download and install the latest stable release of Windows App SDK.

		Reopen Coder Desktop after you install Windows App SDK.
deansheather marked this conversation as resolved. OutdatedShow resolvedHide resolved

		1. Coder Desktop starts minimized in the Windows System Tray.

		You might need to select the^ in your system tray to show more icons.
Copy link Member deansheatherFeb 27, 2025 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Maybe add a comment about how you can pin it by going to (at least on Win 11) Settings > Personalization > Taskbar > Other system tray icons, then enabling Coder Desktop

		1. Continue to the[configuration section](#configure).

		</div>

		##Configure

		Before you can use Coder Desktop, you will need to log in.

		1. Open the Desktop menu and selectSign in:

		<Imageheight="325px"src="../../images/user-guides/desktop/coder-desktop-pre-sign-in.png"alt="Coder Desktop menu before the user signs in"align="center" />

		1. In theSign In window, enter your Coder deployment's URL and selectNext:

		![Coder Desktop sign in](../../images/user-guides/desktop/coder-desktop-sign-in.png)

		1. macOS: Select the link to your deployment's`/cli-auth` page to generate a[session token](../../admin/users/sessions-tokens.md).

		Windows: SelectGenerate a token via the Web UI.

		1. In your web browser, enter your credentials:

		<Imageheight="412px"src="../../images/templates/coder-login-web.png"alt="Log in to your Coder deployment"align="center" />

		1. Copy the session token to the clipboard:

		<Imageheight="350px"src="../../images/templates/coder-session-token.png"alt="Copy session token"align="center" />

		1. Paste the token in theSession Token box of theSign In screen, then selectSign In:

		![Paste the session token in to sign in](../../images/user-guides/desktop/coder-desktop-session-token.png)

		1. Allow the VPN configuration for Coder Desktop if your OS prompts you.

		1. Coder Desktop is now running!

		1. Select the Coder icon in the menu bar (macOS) or system tray (Windows) and enableCoderVPN.

		##Workspaces from Coder Desktop

		![Coder Desktop list of workspaces](../../images/user-guides/desktop/coder-desktop-workspaces.png)

		1. You can use`ping6` in your terminal to verify the connection to your workspace:

		```shell
		ping6 -c 5 yourworkspacename.coder
		```

		1. Select your workspace from the Coder Desktop icon.

		Desktop opens the workspace in your browser.

		![Screenshot of a workspace](../../images/screenshots/workspace-running-with-topbar.png)

		1. Select the IDE you want to use and start working on your code.

		##CoderVPN

		Placeholder for some information about CoderVPN
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,6 +3,7 @@ import {
		AlphaBadge,
		Badges,
		DisabledBadge,
		EaBadge,
		EnabledBadge,
		EntitledBadge,
		HealthyBadge,
Expand DownExpand Up		@@ -65,3 +66,8 @@ export const Alpha: Story = {
		children: <AlphaBadge />,
		},
		};
		export const EarlyAccess: Story = {
		args: {
		children: <EaBadge />,
		},
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -157,6 +157,23 @@ export const PreviewBadge: FC = () => {
		);
		};

		export const EaBadge: FC = () => {
		return (
		<span
		css={[
		styles.badge,
		(theme) => ({
		border: `1px solid ${theme.roles.preview.outline}`,
		backgroundColor: theme.roles.preview.background,
		color: theme.roles.preview.text,
		}),
		]}
		>
		Early Access
		</span>
		);
		};

		export const AlphaBadge: FC = () => {
		return (
		<span
Expand Down