+ {/* Navigation & Header */}
+
+ );
+}
diff --git a/src/app/issues/[id]/page.tsx b/src/app/issues/[id]/page.tsx
new file mode 100644
index 0000000..48bc5ea
--- /dev/null
+++ b/src/app/issues/[id]/page.tsx
@@ -0,0 +1,129 @@
+import { cookies } from "next/headers";
+import { notFound } from "next/navigation";
+import { getDb, schema } from "@/lib/db";
+import { eq } from "drizzle-orm";
+import { verifySessionToken, COOKIE_NAME } from "@/lib/auth/session";
+import {
+ getActiveClaimForIssue,
+ getUserActiveClaims,
+ getMaxActiveClaimsForLevel,
+} from "@/lib/issues/claims";
+import { IssueWorkspaceClient } from "./IssueWorkspaceClient";
+
+export const dynamic = "force-dynamic";
+
+interface IssueDetailPageProps {
+ params: Promise<{ id: string }>;
+}
+
+export async function generateMetadata({ params }: IssueDetailPageProps) {
+ const { id } = await params;
+ const db = await getDb();
+
+ const [issue] = await db
+ .select({
+ title: schema.issues.title,
+ projectName: schema.projects.name,
+ })
+ .from(schema.issues)
+ .innerJoin(schema.projects, eq(schema.issues.projectId, schema.projects.id))
+ .where(eq(schema.issues.id, id))
+ .limit(1);
+
+ if (!issue) {
+ return {
+ title: "Issue Not Found — TechNexusOrg",
+ };
+ }
+
+ return {
+ title: `${issue.title} — ${issue.projectName} — TechNexusOrg`,
+ description: `Claim and contribute to ${issue.title} on TechNexusOrg. Real issues, maintainer reviews, and verifiable credentials.`,
+ };
+}
+
+export default async function IssueDetailPage({ params }: IssueDetailPageProps) {
+ const { id } = await params;
+ const db = await getDb();
+
+ const [issueRecord] = await db
+ .select({
+ id: schema.issues.id,
+ title: schema.issues.title,
+ body: schema.issues.body,
+ bodySnippet: schema.issues.bodySnippet,
+ state: schema.issues.state,
+ htmlUrl: schema.issues.htmlUrl,
+ labels: schema.issues.labels,
+ difficulty: schema.issues.difficulty,
+ estimatedEffort: schema.issues.estimatedEffort,
+ skillsRequired: schema.issues.skillsRequired,
+ isGoodFirstIssue: schema.issues.isGoodFirstIssue,
+ isHelpWanted: schema.issues.isHelpWanted,
+ githubIssueNumber: schema.issues.githubIssueNumber,
+ projectId: schema.projects.id,
+ projectName: schema.projects.name,
+ githubRepo: schema.projects.githubRepo,
+ projectDescription: schema.projects.description,
+ primaryLanguage: schema.projects.primaryLanguage,
+ contributionEnabled: schema.projects.contributionEnabled,
+ })
+ .from(schema.issues)
+ .innerJoin(schema.projects, eq(schema.issues.projectId, schema.projects.id))
+ .where(eq(schema.issues.id, id))
+ .limit(1);
+
+ if (!issueRecord) {
+ notFound();
+ }
+
+ const cookieStore = await cookies();
+ const token = cookieStore.get(COOKIE_NAME)?.value;
+ const sessionUser = token ? await verifySessionToken(token) : null;
+
+ const activeClaim = await getActiveClaimForIssue(id);
+ const userClaims = sessionUser ? await getUserActiveClaims(sessionUser.id) : [];
+ const maxClaims = sessionUser ? getMaxActiveClaimsForLevel(sessionUser.level) : 1;
+
+ return (
+
+
+
+ {/* Notifications */}
+ {error && (
+
+
+ ←
+ Back to Marketplace
+
+ /
+ {project.name}
+ /
+ #{issue.githubIssueNumber}
+
+
+
+
+
+
+
+
+
+
+ {issue.difficulty}
+
+
+ {issue.isGoodFirstIssue && (
+
+ good first issue
+
+ )}
+
+ {issue.estimatedEffort && (
+
+ ⏱ {issue.estimatedEffort}
+
+ )}
+
+
+ {project.githubRepo}
+
+
+
+ + {issue.title} +
+
+ ✕ {error}
+
+ )}
+
+ {successMessage && (
+
+ ✓ {successMessage}
+
+ )}
+
+ {/* Main Grid: 2 Columns */}
+
+ {/* Left Column: Details & Body */}
+
+
+ {/* Issue Description */}
+
+
+ {/* Right Column: Claim & Contribution Workspace */}
+
+
+
+ {/* Acceptance Criteria & Quality Standard */}
+
+
+
+ + Issue Description +
+ + Source: GitHub Issue #{issue.githubIssueNumber} + +
+ {issue.body || issue.bodySnippet || "No description provided in GitHub issue."}
+
+
+ {/* Labels and tags */}
+ {issue.labels.length > 0 && (
+
+
+ )}
+
+ {/* Required Skills */}
+ {issue.skillsRequired.length > 0 && (
+
+ GitHub Labels
+
+
+ {issue.labels.map((lbl) => (
+
+ {lbl}
+
+ ))}
+
+
+
+ )}
+
+ Relevant Skills & Stack
+
+
+ {issue.skillsRequired.map((skill) => (
+
+ {skill}
+
+ ))}
+
+
+
+ + TechNexus Quality & Merge Requirements +
+
+
+
+ 1.
+ Code adheres to repository formatting, ESLint rules, and TypeScript strict mode.
+
+
+ 2.
+ Unit and integration tests pass cleanly without regressions.
+
+
+ 3.
+ Pull request references
+ Fixes #{issue.githubIssueNumber} in the PR description body.
+
+ 4.
+ Maintainer review is approved before merge.
+
+
+ {/* Claim Action Box */}
+
+
+
+
+ {/* Guided Contribution Steps Workspace */}
+
+
+
+ {/* Status Indicator */}
+ {isClaimedByMe ? (
+ + Claim Status +
++ Claiming reserves this issue for 7 days while you implement the solution. +
+
+
+ ) : isClaimedByOther && activeClaim ? (
+
+
+ ● ACTIVE CLAIM (YOU)
+
+
+ {daysRemaining} day{daysRemaining === 1 ? "" : "s"} left
+
+
+
+ You are actively working on this issue. Follow the guided steps below to submit your PR.
+
+
+
+
+ ) : (
+
+ {activeClaim.user.avatarUrl ? (
+ 
+ ) : (
+
+
+ @
+
+ )}
+
+ Claimed by @{activeClaim.user.githubUsername}
+
+ + Reserved for {daysRemaining} more day{daysRemaining === 1 ? "" : "s"}. If released or expired, it will become available again. +
+ +
+
+ )}
+
+
+
+ {!currentUser ? (
+
+ Sign in with GitHub to Claim
+ →
+
+ ) : (
+
+ ✓
+ Ready for Assignment
+
+ + This issue is open and ready to be claimed. Active claims last 7 days and can be released at any time without penalty. +
+
+
+ {userActiveClaimsCount >= userMaxClaims && (
+
+ )}
+ + Active claim limit reached ({userActiveClaimsCount}/{userMaxClaims}). Release an existing claim first. +
+ )} +
+
+ + Contribution Steps +
+ +
+ {/* Step 1 */}
+
+
+
+
+ {/* Step 2 */}
+
+
+ 1
+
+ Clone & Branch
+
+
+
+ + Clone the repository and create a feature branch: +
+
+
+
+ git clone https://github.com/{project.githubRepo}.git{"\n"}
+ cd {project.name.toLowerCase()}{"\n"}
+ git checkout -b fix/issue-{issue.githubIssueNumber}
+
+
+
+
+
+ {/* Step 3 */}
+
+
+ 2
+
+ Implement & Test
+
+
+
+ + Install dependencies and run test verification locally: +
+
+ npm install{"\n"}npm test
+
+
+
+
+ {/* Step 4 */}
+
+
+ 3
+
+ Open PR with Link
+
+
+
+ + Include this exact line in your Pull Request description: +
+
+
+
+ Fixes #{issue.githubIssueNumber}
+
+
+
+
+
+
+ 4
+
+ Merge & Verification
+
+
+
+ + Once merged, GitHub webhooks automatically detect the closure, update your Contributor Passport, and mint your verifiable credential. +
+